Merge pull request #78 from skorphil/loading-state-for-record-form

Implemented loading state whil fetching default values

app/page.jsx

@@ -21,6 +21,8 @@ export default function Home() {
           zIndex="overlay"
         >
           <Box
+            display="flex"
+            flexDir="column"
             bg="chakra-body-bg"
             borderRadius={[0, "md"]}
             h={["100%", "90%"]}

components/InstitutionsTabsList/InstitutionsTabsList.jsx

@@ -2,24 +2,23 @@
 
 // TODO fix animation framer https://github.com/skorphil/nextjs-form/issues/25
 
-import { InstitutionTab } from "../InstitutionTab";
+import { InstitutionTab } from "~/InstitutionTab";
 import { TabList, Heading, Button, Box, IconButton } from "@chakra-ui/react";
 
 import classes from "./InstitutionsTabsList.module.css";
 import { CgMathPlus } from "react-icons/cg";
 import { useVisualViewportSize } from "../../app/hooks";
-import { motion } from "framer-motion";
+// import { motion } from "framer-motion";
 import { useFormContext } from "react-hook-form";
 
-export function InstitutionsTabsList({ simulateKeyboard = false }) {
+export function InstitutionsTabsList({ isKeyboardOpened = false }) {
   const {
     institutionsFieldArray: { fields: institutions },
     handlers: { handleInstitutionCreate },
   } = useFormContext();
   const { height } = useVisualViewportSize();
-  const isKeyboardOpened =
-    simulateKeyboard || (window.innerHeight - height > 200 ? true : false);
-
+  // const isKeyboardOpened =
+  //   simulateKeyboard || (window.innerHeight - height > 200 ? true : false);
   return (
     <Box my={isKeyboardOpened || 3} paddingTop={2}>
       {isKeyboardOpened || <Heading size="md">Record Institutions</Heading>}

components/RecordForm/RecordForm.jsx

@@ -6,7 +6,7 @@ Root element of the form
 
 import { useForm, FormProvider, useFieldArray } from "react-hook-form";
 import classes from "./RecordForm.module.css";
-import { Button } from "@chakra-ui/react";
+import { Button, Progress, useToast } from "@chakra-ui/react";
 import { useState } from "react";
 
 import { InstitutionsList } from "components/InstitutionsList";
@@ -22,6 +22,7 @@ export function RecordForm() {
   const [selectedInstitutionIndex, setSelectedInstitutionIndex] = useState(0);
   const router = useRouter();
   const arrayName = "institutions";
+
   const { control, ...form } = useForm({
     defaultValues: async () => getLatestRecord(),
   });
@@ -63,36 +64,40 @@ export function RecordForm() {
 
   return (
     <FormProvider {...formMethods}>
-      <form className={classes.RecordForm}>
-        {isInstitutionOpen || (
-          <FormHeader
-            text="New Record"
-            rightButtons={
-              <>
-                <Button
-                  onClick={() => {
-                    router.push("/");
-                  }}
-                  variant="outline"
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={formMethods.handleSubmit((data) => {
-                    appendRecord(data);
-                  })}
-                >
-                  Save
-                </Button>
-              </>
-            }
-          />
-        )}
-        <InstitutionsList
-          isInstitutionOpen={isInstitutionOpen}
-          selectedInstitution={selectedInstitutionIndex}
+      {isInstitutionOpen || (
+        <FormHeader
+          text="New Record"
+          rightButtons={
+            <>
+              <Button
+                onClick={() => {
+                  router.push("/");
+                }}
+                variant="outline"
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={formMethods.handleSubmit((data) => {
+                  appendRecord(data);
+                })}
+              >
+                Save
+              </Button>
+            </>
+          }
         />
-      </form>
+      )}
+      {form.formState.isLoading ? (
+        <Progress size="xs" isIndeterminate />
+      ) : (
+        <form className={classes.RecordForm}>
+          <InstitutionsList
+            isInstitutionOpen={isInstitutionOpen}
+            selectedInstitution={selectedInstitutionIndex}
+          />
+        </form>
+      )}
       {/* <DevTool control={formMethods.control} /> */}
     </FormProvider>
   );

components/RecordForm/RecordForm.module.css

@@ -1,5 +1,7 @@
 .RecordForm {
     display: flex;
     flex-direction: column;
-    height: 100%;
+    flex-shrink: 1;
+    flex-grow: 1;
+    height: 600px;
 }

components/RecordForm/SlowLoadingToast.jsx

@@ -0,0 +1,12 @@
+import { useToast } from "@chakra-ui/react";
+
+export function SlowLoadingToast() {
+  const toast = useToast();
+  toast({
+    title: "Account created.",
+    description: "We've created your account for you.",
+    status: "success",
+    duration: 5000,
+    isClosable: true,
+  });
+}