From 464f25d227ac1a49b5909ca131bcab40fe18056c Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Fri, 27 Dec 2024 12:10:28 +0300
Subject: [PATCH] apps/web: add loading spinner remove dev info from page

---
 apps/web/app/(auth)/browser/page.tsx      | 19 +++----------------
 apps/web/app/(auth)/page.tsx              |  2 --
 apps/web/app/(auth)/telegram/page.tsx     | 20 +++-----------------
 packages/ui/src/components/ui/spinner.tsx | 21 +++++++++++++++++++++
 4 files changed, 27 insertions(+), 35 deletions(-)
 create mode 100644 packages/ui/src/components/ui/spinner.tsx

diff --git a/apps/web/app/(auth)/browser/page.tsx b/apps/web/app/(auth)/browser/page.tsx
index 518948f..a989110 100644
--- a/apps/web/app/(auth)/browser/page.tsx
+++ b/apps/web/app/(auth)/browser/page.tsx
@@ -1,13 +1,14 @@
 /* eslint-disable promise/prefer-await-to-then */
 'use client';
 import { getTelegramUser } from '@/mocks/get-telegram-user';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { signIn, useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
 import { redirect } from 'next/navigation';
 import { useEffect } from 'react';
 
 export default function Auth() {
-  const { data: session, status } = useSession();
+  const { status } = useSession();
   useTheme();
 
   useEffect(() => {
@@ -26,19 +27,5 @@ export default function Auth() {
     }
   }, [status]);
 
-  if (status === 'loading') {
-    return <div>Loading Browser Auth...</div>;
-  }
-
-  return (
-    <div>
-      {session ? (
-        <div>
-          Browser Hello, {JSON.stringify(session)} <br />
-        </div>
-      ) : (
-        <div>Not authenticated</div>
-      )}
-    </div>
-  );
+  return <LoadingSpinner />;
 }
diff --git a/apps/web/app/(auth)/page.tsx b/apps/web/app/(auth)/page.tsx
index ce86f35..a8bb59c 100644
--- a/apps/web/app/(auth)/page.tsx
+++ b/apps/web/app/(auth)/page.tsx
@@ -11,6 +11,4 @@ export default function Page() {
 
     redirect(isTG ? '/telegram' : '/browser');
   });
-
-  return <div>{isTG ? 'Telegram Mode' : 'Browser Mode'}</div>;
 }
diff --git a/apps/web/app/(auth)/telegram/page.tsx b/apps/web/app/(auth)/telegram/page.tsx
index 4ce962d..3ac0030 100644
--- a/apps/web/app/(auth)/telegram/page.tsx
+++ b/apps/web/app/(auth)/telegram/page.tsx
@@ -1,4 +1,5 @@
 'use client';
+import { LoadingSpinner } from '@repo/ui/components/ui/spinner';
 import { initData, isMiniAppDark, useSignal } from '@telegram-apps/sdk-react';
 import { signIn, useSession } from 'next-auth/react';
 import { useTheme } from 'next-themes';
@@ -8,7 +9,7 @@ import { useEffect } from 'react';
 export default function Auth() {
   const initDataUser = useSignal(initData.user);
   const isDark = isMiniAppDark();
-  const { data: session, status } = useSession();
+  const { status } = useSession();
   const { setTheme } = useTheme();
 
   useEffect(() => {
@@ -27,20 +28,5 @@ export default function Auth() {
     }
   }, [initDataUser, isDark, setTheme, status]);
 
-  if (status === 'loading') {
-    return <div>Loading Auth...</div>;
-  }
-
-  return (
-    <div>
-      {session ? (
-        <div>
-          Hello, {JSON.stringify(session)} <br />
-          Dark: {JSON.stringify(isDark)}
-        </div>
-      ) : (
-        <div>Not authenticated</div>
-      )}
-    </div>
-  );
+  return <LoadingSpinner />;
 }
diff --git a/packages/ui/src/components/ui/spinner.tsx b/packages/ui/src/components/ui/spinner.tsx
new file mode 100644
index 0000000..dbb582f
--- /dev/null
+++ b/packages/ui/src/components/ui/spinner.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@repo/ui/lib/utils';
+import { Loader2 } from 'lucide-react';
+
+type LoadingSpinnerProps = React.HTMLAttributes<HTMLDivElement> & {
+  readonly size?: 'lg' | 'md' | 'sm';
+};
+
+export function LoadingSpinner({ className, size = 'md', ...props }: LoadingSpinnerProps) {
+  return (
+    <div className={cn('flex items-center justify-center', className)} role="status" {...props}>
+      <Loader2
+        className={cn('animate-spin text-muted-foreground', {
+          'h-4 w-4': size === 'sm',
+          'h-8 w-8': size === 'md',
+          'h-12 w-12': size === 'lg',
+        })}
+      />
+      <span className="sr-only">Loading...</span>
+    </div>
+  );
+}