apps/web: add loading spinner

remove dev info from page

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 />;
 }

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>;
 }

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 />;
 }

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>
+  );
+}