Style the Loading Page

gabe-serna · Nov 9, 2024 · 1c27ff4 · 1c27ff4
1 parent 4e98a68
commit 1c27ff4
Show file tree

Hide file tree

Showing 9 changed files with 344 additions and 175 deletions.
diff --git a/app/audio/AudioForm.tsx b/app/audio/AudioForm.tsx
@@ -9,8 +9,13 @@ import getTempo from "@/utils/getTempo";
 import isolateAudio from "@/utils/isolateAudio";
 import getAudioFromURL from "@/utils/getAudioFromUrl";
 import { useToast } from "@/hooks/use-toast";
+import Loading from "@/components/Loading";
 
-export default function AudioForm() {
+export default function AudioForm({
+  setFormComplete,
+}: {
+  setFormComplete: (value: boolean) => void;
+}) {
   const { audioForm, setAudioForm, setAudioStorage, songName } =
     useContext(AudioContext);
   const isPart1Complete = audioForm.audio_file || audioForm.audio_link;
@@ -72,7 +77,10 @@ export default function AudioForm() {
 
         // Make API Request
         isolateAudio(formData, setAudioStorage).then(() => {
-          setIsSubmitting(false);
+          setTimeout(() => {
+            setIsSubmitting(false);
+            setisLoading(false);
+          }, 2000);
         });
       } catch (error) {
         console.error(error);
@@ -151,16 +159,14 @@ export default function AudioForm() {
         in={isLoading}
         timeout={700}
         classNames="fade"
+        onExited={() => setFormComplete(true)}
         unmountOnExit
       >
         <div
           ref={loadingRef}
           className="flex flex-col items-center justify-center space-y-4"
         >
-          <h1 className="text-center text-3xl font-bold lg:text-4xl">
-            Loading...
-          </h1>
-          {/* <LoadingFacts/> */}
+          <Loading />
         </div>
       </CSSTransition>
     </div>

diff --git a/app/audio/AudioPart3.tsx b/app/audio/AudioPart3.tsx
@@ -132,7 +132,7 @@ export default function AudioPart3({
         </div>
         <Button
           type="submit"
-          className="mt-4 w-full rounded-full bg-yellow-400 text-base font-semibold text-foreground shadow-lg hover:bg-yellow-400 dark:bg-yellow-600 dark:text-background dark:shadow-stone-900 dark:hover:bg-yellow-600 max-lg:text-lg sm:max-lg:py-6 lg:w-3/4"
+          className="button-action mt-4 w-full rounded-full text-base shadow-lg max-lg:text-lg sm:max-lg:py-6 lg:w-3/4"
         >
           Submit
         </Button>