updated loading

muhammad-fiaz · muhammad-fiaz · commit ddad4fc5ac12 · 2026-03-15T09:30:39.000+05:30
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -149,6 +149,22 @@ export default function RootLayout({
     },
   };
 
+  const shellFallback = (
+    <div className="fixed inset-0 z-80 flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-lg border-4 border-black bg-card p-4 shadow-retro-lg sm:p-6">
+        <p className="font-pixel text-2xl uppercase text-foreground sm:text-3xl">
+          Muhammad Fiaz
+        </p>
+        <p className="mt-2 text-sm font-black uppercase text-muted-foreground sm:text-base">
+          Loading workspace...
+        </p>
+        <div className="mt-5 h-7 border-4 border-black bg-muted p-1 sm:h-8">
+          <div className="h-full w-full animate-pulse border-2 border-black bg-primary" />
+        </div>
+      </div>
+    </div>
+  );
+
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
@@ -166,7 +182,7 @@ export default function RootLayout({
           <GoogleTagManager gtmId={gtmId} />
         ) : null}
         {shouldLoadAnalytics && gaId ? <GoogleAnalytics gaId={gaId} /> : null}
-        <Suspense fallback={null}>
+        <Suspense fallback={shellFallback}>
           <ThemeProvider>
             <RouteProgressBar />
             <InitialLoader />
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
@@ -0,0 +1,17 @@
+export default function Loading() {
+  return (
+    <div className="fixed inset-0 z-80 flex items-center justify-center bg-background px-4">
+      <div className="w-full max-w-lg border-4 border-black bg-card p-4 shadow-retro-lg sm:p-6">
+        <p className="font-pixel text-2xl uppercase text-foreground sm:text-3xl">
+          Muhammad Fiaz
+        </p>
+        <p className="mt-2 text-sm font-black uppercase text-muted-foreground sm:text-base">
+          Booting workspace...
+        </p>
+        <div className="mt-5 h-7 border-4 border-black bg-muted p-1 sm:h-8">
+          <div className="h-full w-full animate-pulse border-2 border-black bg-primary" />
+        </div>
+      </div>
+    </div>
+  );
+}
