trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add loading indicator to submit buttons

Browse source
This commit is contained in:
trafficlunar 2025-04-23 18:38:21 +01:00
parent 99c3aa5add
commit e1d248853f
7 changed files with 53 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/submit-form/edit-form.tsx
View file

@ -13,6 +13,7 @@ import TagSelector from "../tag-selector";
import ImageList from "./image-list";
import LikeButton from "../like-button";
import Carousel from "../carousel";
import SubmitButton from "../submit-button";
interface Props {
mii: Mii;
@ -46,9 +47,7 @@ export default function EditForm({ mii, likes }: Props) {
const [tags, setTags] = useState(mii.tags);
const hasFilesChanged = useRef(false);
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
const handleSubmit = async () => {
// Validate before sending request
const nameValidation = nameSchema.safeParse(name);
if (!nameValidation.success) {
@ -110,7 +109,7 @@ export default function EditForm({ mii, likes }: Props) {
}, [mii.id, mii.imageCount]);
return (
<form onSubmit={handleSubmit} className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
<form className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
<div className="flex justify-center">
<div className="w-[18.75rem] h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
<Carousel images={[`/mii/${mii.id}/mii.webp`, `/mii/${mii.id}/qr-code.webp`, ...files.map((file) => URL.createObjectURL(file))]} />
@ -201,9 +200,7 @@ export default function EditForm({ mii, likes }: Props) {
<div className="flex justify-between items-center">
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
<button type="submit" className="pill button w-min ml-auto">
Edit
</button>
<SubmitButton onClick={handleSubmit} text="Edit" className="ml-auto" />
</div>
</div>
</form>

11
src/components/submit-form/index.tsx
View file

@ -19,6 +19,7 @@ import QrUpload from "./qr-upload";
import QrScanner from "./qr-scanner";
import LikeButton from "../like-button";
import Carousel from "../carousel";
import SubmitButton from "../submit-button";
export default function SubmitForm() {
const [files, setFiles] = useState<FileWithPath[]>([]);
@ -49,9 +50,7 @@ export default function SubmitForm() {
const [tags, setTags] = useState<string[]>([]);
const [qrBytesRaw, setQrBytesRaw] = useState<number[]>([]);
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
const handleSubmit = async () => {
// Validate before sending request
const nameValidation = nameSchema.safeParse(name);
if (!nameValidation.success) {
@ -129,7 +128,7 @@ export default function SubmitForm() {
}, [qrBytesRaw]);
return (
<form onSubmit={handleSubmit} className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
<form className="flex justify-center gap-4 w-full max-lg:flex-col max-lg:items-center">
<div className="flex justify-center">
<div className="w-[18.75rem] h-min flex flex-col bg-zinc-50 rounded-3xl border-2 border-zinc-300 shadow-lg p-3">
<Carousel
@ -242,9 +241,7 @@ export default function SubmitForm() {
<div className="flex justify-between items-center">
{error && <span className="text-red-400 font-bold">Error: {error}</span>}
<button type="submit" className="pill button w-min ml-auto">
Submit
</button>
<SubmitButton onClick={handleSubmit} className="ml-auto" />
</div>
</div>
</form>