New loading before rendering

python/calypsso/__about__.py

@@ -1 +1 @@
-__version__ = "1.1.2"
+__version__ = "1.1.4"

src/app/globals.css

@@ -206,3 +206,24 @@
     box-shadow: inset -20px 20px rgba(0, 0, 0, 0.2);
   }
 }
+
+.skeleton {
+  animation: loading_for_skeleton 1s linear infinite alternate;
+  width: 100%;
+  height: 40px;
+  border-radius: 0.5rem;
+}
+
+@keyframes loading_for_skeleton {
+  0% {
+    background-color: hsl(200, 20%, 80%);
+  }
+  100% {
+    background-color: hsl(200, 20%, 95%);
+  }
+}
+
+.skeleton-formlabel {
+  width: 10%;
+  height: 20px;
+}

src/app/login/page.tsx

@@ -51,7 +51,14 @@ const Login = () => {
           }/auth/authorization-flow/authorize-validation`}
         >
           <div className="grid gap-4">
-            <Suspense>
+            <Suspense
+              fallback={
+                <>
+                  <div className="skeleton skeleton-formlabel"></div>
+                  <div className="skeleton"></div>
+                </>
+              }
+            >
               <LoginCustomFormField
                 form={form}
                 name="email"
@@ -65,7 +72,14 @@ const Login = () => {
                 )}
               />
             </Suspense>
-            <Suspense>
+            <Suspense
+              fallback={
+                <>
+                  <div className="skeleton skeleton-formlabel"></div>
+                  <div className="skeleton"></div>
+                </>
+              }
+            >
               <LoginCustomFormField
                 form={form}
                 name="password"

src/components/custom/SuspenseEmbed.tsx

@@ -5,5 +5,5 @@ interface SuspenseEmbedProps {
 }
 
 export const SuspenseEmbed = ({ children }: SuspenseEmbedProps) => {
-  return <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>;
+  return <Suspense fallback={<></>}>{children}</Suspense>;
 };