From 1dc23d19abe17e7861a8187bfc6badca5ec005a4 Mon Sep 17 00:00:00 2001
From: Aly Raffauf <aly@aly.codes>
Date: Thu, 23 Apr 2026 21:47:56 -0400
Subject: [PATCH] web: add PageSkeleton

---
 web/src/components/layout/HydrateFallback.tsx | 10 ----------
 web/src/components/layout/Layout.tsx          | 15 +++------------
 web/src/components/layout/PageSkeleton.tsx    | 14 ++++++++++++++
 web/src/index.css                             | 15 ---------------
 4 files changed, 17 insertions(+), 37 deletions(-)
 delete mode 100644 web/src/components/layout/HydrateFallback.tsx
 create mode 100644 web/src/components/layout/PageSkeleton.tsx

diff --git a/web/src/components/layout/HydrateFallback.tsx b/web/src/components/layout/HydrateFallback.tsx
deleted file mode 100644
index e456022..0000000
--- a/web/src/components/layout/HydrateFallback.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function HydrateFallback() {
-  return (
-    <div className="flex flex-col h-dvh">
-      <div
-        className="fixed top-0 left-0 right-0 h-0.5 bg-neutral-400 z-50"
-        style={{ animation: "atbbs-progress 1.5s ease-out infinite" }}
-      />
-    </div>
-  );
-}
diff --git a/web/src/components/layout/Layout.tsx b/web/src/components/layout/Layout.tsx
index 7f494ba..565ca30 100644
--- a/web/src/components/layout/Layout.tsx
+++ b/web/src/components/layout/Layout.tsx
@@ -1,17 +1,14 @@
 import { Suspense } from "react";
-import { Outlet, useLocation, useNavigation } from "react-router-dom";
-import { useIsFetching } from "@tanstack/react-query";
+import { Outlet, useLocation } from "react-router-dom";
 import Header from "./Header";
 import MobileBackButton from "./MobileBackButton";
 import Footer from "./Footer";
 import ErrorBoundary from "./ErrorBoundary";
+import PageSkeleton from "./PageSkeleton";
 import LoginModal from "../auth/LoginModal";
 import { LoginModalProvider } from "../../lib/loginModal";
 
 export default function Layout() {
-  const routeLoading = useNavigation().state === "loading";
-  const queriesLoading = useIsFetching() > 0;
-  const showProgress = routeLoading || queriesLoading;
   // Remount ErrorBoundary + Suspense on navigation so a fresh page doesn't
   // inherit the previous page's error or fallback state.
   const routeKey = useLocation().pathname;
@@ -19,17 +16,11 @@ export default function Layout() {
   return (
     <LoginModalProvider>
       <div className="flex flex-col h-dvh">
-        {showProgress && (
-          <div
-            className="fixed top-0 left-0 right-0 h-0.5 bg-neutral-400 z-50"
-            style={{ animation: "atbbs-progress 1.5s ease-out infinite" }}
-          />
-        )}
         <Header />
         <main className="max-w-2xl mx-auto px-4 py-8 flex-1 w-full">
           <MobileBackButton />
           <ErrorBoundary key={routeKey}>
-            <Suspense fallback={null}>
+            <Suspense fallback={<PageSkeleton />}>
               <Outlet />
             </Suspense>
           </ErrorBoundary>
diff --git a/web/src/components/layout/PageSkeleton.tsx b/web/src/components/layout/PageSkeleton.tsx
new file mode 100644
index 0000000..ceb8731
--- /dev/null
+++ b/web/src/components/layout/PageSkeleton.tsx
@@ -0,0 +1,14 @@
+export default function PageSkeleton() {
+  return (
+    <div className="space-y-4 animate-pulse" aria-hidden>
+      <div className="h-6 w-2/3 bg-neutral-800 rounded" />
+      <div className="h-4 w-full bg-neutral-900 rounded" />
+      <div className="h-4 w-5/6 bg-neutral-900 rounded" />
+      <div className="space-y-2 pt-4">
+        <div className="h-16 w-full bg-neutral-900 rounded" />
+        <div className="h-16 w-full bg-neutral-900 rounded" />
+        <div className="h-16 w-full bg-neutral-900 rounded" />
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/index.css b/web/src/index.css
index 4f8ad7a..013ff63 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -52,18 +52,3 @@ samp {
   }
 }
 
-@keyframes atbbs-progress {
-  0% {
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  50% {
-    transform: scaleX(0.6);
-    transform-origin: left;
-  }
-  100% {
-    transform: scaleX(1);
-    transform-origin: left;
-    opacity: 0;
-  }
-}
-- 
2.51.2