From aa7f5d178b38106d124ed385d9b2e4ecfd279669 Mon Sep 17 00:00:00 2001
From: Max Peintner <max@caos.ch>
Date: Tue, 26 Nov 2024 14:46:52 +0100
Subject: [PATCH] implement skeleton

---
 apps/login/src/app/(login)/layout.tsx         | 18 ++++++---
 .../src/components/language-provider.tsx      |  4 +-
 apps/login/src/components/skeleton.tsx        |  9 +++++
 apps/login/src/styles/globals.scss            | 39 +++++++++++++++++++
 4 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 apps/login/src/components/skeleton.tsx

diff --git a/apps/login/src/app/(login)/layout.tsx b/apps/login/src/app/(login)/layout.tsx
index c7c681f05fa..936c7e17e48 100644
--- a/apps/login/src/app/(login)/layout.tsx
+++ b/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>
   );
diff --git a/apps/login/src/components/language-provider.tsx b/apps/login/src/components/language-provider.tsx
index 524704b6006..21a53093bb1 100644
--- a/apps/login/src/components/language-provider.tsx
+++ b/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}
diff --git a/apps/login/src/components/skeleton.tsx b/apps/login/src/components/skeleton.tsx
new file mode 100644
index 00000000000..548953d278c
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/login/src/styles/globals.scss b/apps/login/src/styles/globals.scss
index 2a2e80f2c66..cfce853bc7a 100755
--- a/apps/login/src/styles/globals.scss
+++ b/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;
+  }
+}