feat(web): standardize loading on shared skeleton recipes; retire '…' + empty status divs (#53)

web/src/app.tsx

@@ -12,6 +12,7 @@ import { VocabulariesPage } from "./vocab/vocabularies-page";
 import { VocabularyTerms } from "./vocab/vocabulary-terms";
 import { SelectVocabularyPrompt } from "./vocab/select-vocabulary-prompt";
 import { AuthoritiesPage } from "./authorities/authorities-page";
+import { FormSkeleton, ListSkeleton } from "@/components/ui/skeletons";
 
 const ObjectNewPage = lazy(() =>
   import("./objects/object-new-page").then((m) => ({ default: m.ObjectNewPage })),
@@ -25,10 +26,6 @@ const FieldsPage = lazy(() =>
   import("./fields/fields-page").then((m) => ({ default: m.FieldsPage })),
 );
 
-function FormFallback() {
-  return <div role="status" className="p-4 text-sm text-muted-foreground">Loading…</div>;
-}
-
 const router = createBrowserRouter(
   createRoutesFromElements(
     <>
@@ -38,7 +35,7 @@ const router = createBrowserRouter(
           <Route
             path="/objects/new"
             element={
-              <Suspense fallback={<FormFallback />}>
+              <Suspense fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}>
                 <ObjectNewPage />
               </Suspense>
             }
@@ -48,7 +45,7 @@ const router = createBrowserRouter(
             <Route
               path=":id/edit"
               element={
-                <Suspense fallback={<FormFallback />}>
+                <Suspense fallback={<div className="mx-auto max-w-2xl"><FormSkeleton /></div>}>
                   <ObjectEditForm />
                 </Suspense>
               }
@@ -67,7 +64,7 @@ const router = createBrowserRouter(
           <Route
             path="/fields"
             element={
-              <Suspense fallback={<FormFallback />}>
+              <Suspense fallback={<ListSkeleton />}>
                 <FieldsPage />
               </Suspense>
             }