From 61cf6e72b68e27c7deec1308a4123d9e9d44d4bb Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 26 Nov 2020 15:41:29 +0200
Subject: [PATCH] display spinner when submitting form

---
 TODO.md                       |  4 +++-
 components/u/BuildModal.tsx   | 12 +++++-------
 components/u/ProfileModal.tsx | 11 +++++------
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/TODO.md b/TODO.md
index 3f725a0af..09ea95f19 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,8 +1,10 @@
 ### Before production
 
-- [ ] Can log in
+- [x] Can log in
 - [ ] Can update builds
 - [ ] Build Analyzer
+  - [ ] Import /analyzer
+  - [ ] Builds link to /analyzer
 - [ ] Script to parse data from Top 500 .json to the DB
 - [ ] Top 500 Leaderboards
 - [ ] Localization
diff --git a/components/u/BuildModal.tsx b/components/u/BuildModal.tsx
index a77df9ca9..6156fff1b 100644
--- a/components/u/BuildModal.tsx
+++ b/components/u/BuildModal.tsx
@@ -35,7 +35,7 @@ import {
   TITLE_CHARACTER_LIMIT,
 } from "lib/validators/build";
 import { GetBuildsByUserData } from "prisma/queries/getBuildsByUser";
-import { Fragment } from "react";
+import { Fragment, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { mutate } from "swr";
 import * as z from "zod";
@@ -49,6 +49,7 @@ interface Props {
 type FormData = z.infer<typeof buildSchema>;
 
 const BuildModal: React.FC<Props> = ({ onClose, build }) => {
+  const [sending, setSending] = useState(false);
   const [loggedInUser] = useUser();
 
   const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
@@ -82,6 +83,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
   const toast = useToast();
 
   const onSubmit = async (formData: FormData) => {
+    setSending(true);
     const mutationData = { ...formData };
 
     for (const [key, value] of Object.entries(mutationData)) {
@@ -92,6 +94,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
     }
 
     const success = await sendData("POST", "/api/builds", mutationData);
+    setSending(false);
     if (!success) return;
 
     if (!loggedInUser) throw Error("unexpected no logged in user");
@@ -345,12 +348,7 @@ const BuildModal: React.FC<Props> = ({ onClose, build }) => {
               </FormControl>
             </ModalBody>
             <ModalFooter>
-              <Button
-                mr={3}
-                type="submit"
-                // TODO:
-                //isLoading={loading}
-              >
+              <Button mr={3} type="submit" isLoading={sending}>
                 <Trans>Save</Trans>
               </Button>
               <Button onClick={onClose} variant="outline">
diff --git a/components/u/ProfileModal.tsx b/components/u/ProfileModal.tsx
index 471d74dcc..873863dec 100644
--- a/components/u/ProfileModal.tsx
+++ b/components/u/ProfileModal.tsx
@@ -30,6 +30,7 @@ import {
   PROFILE_CHARACTER_LIMIT,
 } from "lib/validators/profile";
 import { GetUserByIdentifierData } from "prisma/queries/getUserByIdentifier";
+import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { FaGamepad, FaTwitch, FaTwitter, FaYoutube } from "react-icons/fa";
 import { mutate } from "swr";
@@ -73,6 +74,7 @@ interface Props {
 type FormData = z.infer<typeof profileSchemaFrontend>;
 
 const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
+  const [sending, setSending] = useState(false);
   const { i18n } = useLingui();
 
   const { handleSubmit, errors, register, watch, control } = useForm<FormData>({
@@ -91,6 +93,7 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
   const toast = useToast();
 
   const onSubmit = async (formData: FormData) => {
+    setSending(true);
     const mutationData = {
       ...formData,
       // sens is treated as string on the frontend side of things because
@@ -113,6 +116,7 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
     }
 
     const success = await sendData("PUT", "/api/me/profile", mutationData);
+    setSending(false);
     if (!success) return;
 
     mutate(`/api/users/${user.id}`);
@@ -318,12 +322,7 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
               />
             </ModalBody>
             <ModalFooter>
-              <Button
-                mr={3}
-                type="submit"
-                // TODO:
-                //isLoading={loading}
-              >
+              <Button mr={3} type="submit" isLoading={sending}>
                 <Trans>Save</Trans>
               </Button>
               <Button onClick={onClose} variant="outline">