implement skeleton

apps/login/src/app/(login)/layout.tsx

@@ -1,8 +1,8 @@
 import "@/styles/globals.scss";
 
-import { Alert, AlertType } from "@/components/alert";
 import { LanguageProvider } from "@/components/language-provider";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { Skeleton } from "@/components/skeleton";
 import { Theme } from "@/components/theme";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Analytics } from "@vercel/analytics/react";
@@ -26,8 +26,17 @@ export default async function RootLayout({
         <ThemeProvider>
           <Suspense
             fallback={
-              <div className="flex flex-row items-center justify-center py-4">
-                <Alert type={AlertType.INFO}>Loading...</Alert>
+              <div
+                className={`relative min-h-screen bg-background-light-600 dark:bg-background-dark-600 flex flex-col justify-center`}
+              >
+                <div className="relative mx-auto max-w-[440px] py-8 w-full">
+                  <Skeleton>
+                    <div className="h-40"></div>
+                  </Skeleton>
+                  <div className="flex flex-row justify-end py-4 items-center space-x-4">
+                    <Theme />
+                  </div>
+                </div>
               </div>
             }
           >
@@ -43,11 +52,10 @@ export default async function RootLayout({
                   </div>
                 </div>
               </div>
-
-              <Analytics />
             </LanguageProvider>
           </Suspense>
         </ThemeProvider>
+        <Analytics />
       </body>
     </html>
   );

apps/login/src/components/language-provider.tsx

@@ -1,10 +1,10 @@
 import { NextIntlClientProvider } from "next-intl";
-import { getLocale, getMessages } from "next-intl/server";
+import { getMessages } from "next-intl/server";
 import { ReactNode } from "react";
 
 export async function LanguageProvider({ children }: { children: ReactNode }) {
-  const locale = await getLocale();
   const messages = await getMessages();
+
   return (
     <NextIntlClientProvider messages={messages}>
       {children}

apps/login/src/components/skeleton.tsx

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+export function Skeleton({ children }: { children?: ReactNode }) {
+  return (
+    <div className="skeleton py-12 px-8 rounded-lg bg-background-light-600 dark:bg-background-dark-600 flex flex-row items-center justify-center">
+      {children}
+    </div>
+  );
+}

apps/login/src/styles/globals.scss

@@ -24,3 +24,42 @@ html {
 .form-checkbox:checked {
   background-image: url("/checkbox.svg");
 }
+
+.skeleton {
+  --accents-2: var(--theme-light-background-400);
+  --accents-1: var(--theme-light-background-500);
+
+  background-image: linear-gradient(
+    270deg,
+    var(--accents-1),
+    var(--accents-2),
+    var(--accents-2),
+    var(--accents-1)
+  );
+  background-size: 400% 100%;
+  animation: skeleton_loading 8s ease-in-out infinite;
+}
+
+.dark .skeleton {
+  --accents-2: var(--theme-dark-background-400);
+  --accents-1: var(--theme-dark-background-500);
+
+  background-image: linear-gradient(
+    270deg,
+    var(--accents-1),
+    var(--accents-2),
+    var(--accents-2),
+    var(--accents-1)
+  );
+  background-size: 400% 100%;
+  animation: skeleton_loading 8s ease-in-out infinite;
+}
+
+@keyframes skeleton_loading {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}