diff --git a/src/admin/AdminApp.tsx b/src/admin/AdminApp.tsx
index 3080560..81b0ec7 100644
--- a/src/admin/AdminApp.tsx
+++ b/src/admin/AdminApp.tsx
@@ -8,6 +8,7 @@ import ErrorBoundary from "./components/ErrorBoundary";
 import AppShell from "./ui/AppShell";
 import AlertContainer from "./components/AlertContainer";
 import MuiProvider from "./ui/MuiProvider";
+import { LoadingState } from "./ui";
 import Login from "./pages/Login";
 import Dashboard from "./pages/Dashboard";
 import "./variables.css";
@@ -90,13 +91,7 @@ export default function AdminApp() {
           <QueryClientProvider client={queryClient}>
             <AlertContainer />
             <ErrorBoundary>
-              <Suspense
-                fallback={
-                  <div className="admin-loading">
-                    <div className="admin-spinner" />
-                  </div>
-                }
-              >
+              <Suspense fallback={<LoadingState />}>
                 <Routes>
                   <Route path="login" element={<Login />} />
                   {import.meta.env.DEV && UiKit && (
diff --git a/src/admin/components/PlanGrid.tsx b/src/admin/components/PlanGrid.tsx
index f3ca636..c7ba23a 100644
--- a/src/admin/components/PlanGrid.tsx
+++ b/src/admin/components/PlanGrid.tsx
@@ -9,6 +9,7 @@ import {
 } from "../lib/queries/plan";
 import type { Project } from "../lib/queries/projects";
 import PlanRangeChips from "./PlanRangeChips";
+import { LoadingState } from "../ui";
 
 interface Props {
   data: GridData | undefined;
@@ -107,12 +108,7 @@ export default function PlanGrid({
   const today = useMemo(() => todayIso(), []);
   const catMap = useMemo(() => categoryMap(categories), [categories]);
 
-  if (!data)
-    return (
-      <div className="admin-loading">
-        <div className="admin-spinner" />
-      </div>
-    );
+  if (!data) return <LoadingState />;
   const days = eachDay(data.date_from, data.date_to);
   const users = data.users;
   // pulseKey?.nonce is included in the data-pulse attribute so a second
diff --git a/src/admin/ui/AppShell.tsx b/src/admin/ui/AppShell.tsx
index a8420bb..6daca5f 100644
--- a/src/admin/ui/AppShell.tsx
+++ b/src/admin/ui/AppShell.tsx
@@ -9,6 +9,7 @@ import { useAuth } from "../context/AuthContext";
 import ThemeToggle from "./ThemeToggle";
 import { setLogoutAlert } from "../utils/api";
 import SidebarNav from "./SidebarNav";
+import LoadingState from "./LoadingState";
 import ShortcutsHelp from "../components/ShortcutsHelp";
 
 const DRAWER_WIDTH = 248;
@@ -38,7 +39,7 @@ export default function AppShell() {
             bgcolor: "background.default",
           }}
         >
-          <div className="admin-spinner" />
+          <LoadingState />
         </Box>
       </ScopedCssBaseline>
     );