feat: Added Transition for better question submit flow

src/components/QuestionSubmissionForm.tsx

@@ -1,5 +1,8 @@
+// import { useState } from 'react';
+import '../pages/questions/transition.module.css';
 import { type SubmitHandler, useForm, FieldValues } from 'react-hook-form';
 import type { PageProps } from '../lib/types';
+import { useState } from 'react';
 
 interface QuestionSubmissionFormInputs {
   company: string;
@@ -15,6 +18,7 @@ export function QuestionSubmissionForm({ session }: PageProps) {
   // reference: https://react-hook-form.com/get-started#Quickstart
   const { register, handleSubmit, reset, formState } = useForm<QuestionSubmissionFormInputs>();
 
+  const [loading, setLoading] = useState(false);
   const onSubmit: SubmitHandler<FieldValues> = async data => {
     console.log(data);
 
@@ -36,6 +40,10 @@ export function QuestionSubmissionForm({ session }: PageProps) {
     } catch (err) {
       console.log(err);
     }
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
 
     console.log(result);
 
@@ -176,6 +184,12 @@ export function QuestionSubmissionForm({ session }: PageProps) {
           </div>
         </div>
       </form>
+      {loading && (
+        <div className='spinner-wrapper'>
+          <div className='spinner'></div>
+        </div>
+      )}
+      {/* {submitMessage && <div>Submit another Question</div>} */}
     </div>
   );
 }

src/pages/questions/transition.module.css

@@ -0,0 +1,62 @@
+.spinner-wrapper {
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background-color: rgb(255, 255, 255);
+  z-index: 9999;
+}
+.spinner {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  height: 60px;
+  width: 60px;
+  margin: 0px auto;
+  -webkit-animation: rotation 0.6s infinite linear;
+  -moz-animation: rotation 0.6s infinite linear;
+  -o-animation: rotation 0.6s infinite linear;
+  animation: rotation 0.6s infinite linear;
+  border-left: 6px solid rgba(0, 174, 239, 0.15);
+  border-right: 6px solid rgba(0, 174, 239, 0.15);
+  border-bottom: 6px solid rgba(0, 174, 239, 0.15);
+  border-top: 6px solid rgba(0, 174, 239, 0.8);
+  border-radius: 100%;
+}
+
+@-webkit-keyframes rotation {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(359deg);
+  }
+}
+@-moz-keyframes rotation {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-o-keyframes rotation {
+  from {
+    -o-transform: rotate(0deg);
+  }
+  to {
+    -o-transform: rotate(359deg);
+  }
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}

src/styles/globals.css

@@ -16,3 +16,67 @@
 #__next {
   min-height: 100%;
 }
+@layer components {
+  .spinner-wrapper {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background-color: rgb(255, 255, 255);
+    z-index: 9999;
+  }
+  .spinner {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    height: 60px;
+    width: 60px;
+    margin: 0px auto;
+    -webkit-animation: rotation 0.6s infinite linear;
+    -moz-animation: rotation 0.6s infinite linear;
+    -o-animation: rotation 0.6s infinite linear;
+    animation: rotation 0.6s infinite linear;
+    border-left: 6px solid rgba(0, 174, 239, 0.15);
+    border-right: 6px solid rgba(0, 174, 239, 0.15);
+    border-bottom: 6px solid rgba(0, 174, 239, 0.15);
+    border-top: 6px solid rgba(0, 174, 239, 0.8);
+    border-radius: 100%;
+  }
+
+  @-webkit-keyframes rotation {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(359deg);
+    }
+  }
+  @-moz-keyframes rotation {
+    from {
+      -moz-transform: rotate(0deg);
+    }
+    to {
+      -moz-transform: rotate(359deg);
+    }
+  }
+  @-o-keyframes rotation {
+    from {
+      -o-transform: rotate(0deg);
+    }
+    to {
+      -o-transform: rotate(359deg);
+    }
+  }
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }
+}