feat(web): shared loading skeleton recipes (List/Form/AppShell) + common.loading (#53)

web/src/components/ui/skeletons.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { AppShellSkeleton, FormSkeleton, ListSkeleton } from './skeletons'
+
+const meta = {
+  component: ListSkeleton,
+  tags: ['ai-generated'],
+} satisfies Meta<typeof ListSkeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const List: Story = {
+  render: () => <ListSkeleton rows={4} />,
+  play: async ({ canvas }) => {
+    await expect(canvas.getByRole('status')).toBeInTheDocument()
+  },
+}
+
+export const Form: Story = { render: () => <FormSkeleton /> }
+
+export const AppShellLoading: Story = { render: () => <AppShellSkeleton /> }

web/src/components/ui/skeletons.tsx

@@ -0,0 +1,63 @@
+import { useTranslation } from "react-i18next"
+
+import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton"
+
+function ListSkeleton({
+  rows = 6,
+  rowClassName = "h-9 w-full",
+  className,
+}: {
+  rows?: number
+  rowClassName?: string
+  className?: string
+}) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className={cn("space-y-2 p-3", className)}>
+      {Array.from({ length: rows }).map((_, i) => (
+        <Skeleton key={i} className={rowClassName} />
+      ))}
+    </div>
+  )
+}
+
+function FormSkeleton({ fields = 5, className }: { fields?: number; className?: string }) {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className={cn("space-y-4 p-4", className)}>
+      {Array.from({ length: fields }).map((_, i) => (
+        <div key={i} className="space-y-1">
+          <Skeleton className="h-3 w-24" />
+          <Skeleton className="h-8 w-full" />
+        </div>
+      ))}
+      <Skeleton className="h-8 w-28" />
+    </div>
+  )
+}
+
+function AppShellSkeleton() {
+  const { t } = useTranslation()
+  return (
+    <div role="status" aria-busy="true" aria-label={t("common.loading")} className="flex min-h-screen">
+      <aside className="w-44 space-y-2 border-r p-3">
+        {Array.from({ length: 5 }).map((_, i) => (
+          <Skeleton key={i} className="h-8 w-full" />
+        ))}
+      </aside>
+      <div className="flex flex-1 flex-col">
+        <div className="flex items-center border-b px-4 py-2">
+          <Skeleton className="h-6 w-40" />
+        </div>
+        <div className="flex-1 space-y-2 p-3">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="h-9 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { ListSkeleton, FormSkeleton, AppShellSkeleton }

web/src/i18n/en.json

@@ -1,5 +1,5 @@
 {
-  "common": { "yes": "Yes", "no": "No", "close": "Close" },
+  "common": { "yes": "Yes", "no": "No", "close": "Close", "loading": "Loading" },
   "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" },
   "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" },
   "objects": { "title": "Objects", "empty": "No objects yet", "loadError": "Could not load objects", "notFound": "Object not found", "prev": "Previous", "next": "Next", "of": "of", "new": "New object", "filter": "Filter objects…", "pageSize": "Per page", "columns": { "number": "Object №", "name": "Name", "visibility": "Visibility", "location": "Location", "count": "#", "updated": "Updated" }, "unknownRef": "(unknown)" },

web/src/i18n/sv.json

@@ -1,5 +1,5 @@
 {
-  "common": { "yes": "Ja", "no": "Nej", "close": "Stäng" },
+  "common": { "yes": "Ja", "no": "Nej", "close": "Stäng", "loading": "Laddar" },
   "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" },
   "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" },
   "objects": { "title": "Föremål", "empty": "Inga föremål ännu", "loadError": "Kunde inte ladda föremål", "notFound": "Föremålet hittades inte", "prev": "Föregående", "next": "Nästa", "of": "av", "new": "Nytt föremål", "filter": "Filtrera föremål…", "pageSize": "Per sida", "columns": { "number": "Föremålsnr", "name": "Namn", "visibility": "Synlighet", "location": "Plats", "count": "Antal", "updated": "Uppdaterad" }, "unknownRef": "(okänd)" },