diff --git a/web/src/components/ui/skeletons.stories.tsx b/web/src/components/ui/skeletons.stories.tsx new file mode 100644 index 0000000..7296771 --- /dev/null +++ b/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 + +export default meta +type Story = StoryObj + +export const List: Story = { + render: () => , + play: async ({ canvas }) => { + await expect(canvas.getByRole('status')).toBeInTheDocument() + }, +} + +export const Form: Story = { render: () => } + +export const AppShellLoading: Story = { render: () => } diff --git a/web/src/components/ui/skeletons.tsx b/web/src/components/ui/skeletons.tsx new file mode 100644 index 0000000..4a1a03c --- /dev/null +++ b/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 ( +
+ {Array.from({ length: rows }).map((_, i) => ( + + ))} +
+ ) +} + +function FormSkeleton({ fields = 5, className }: { fields?: number; className?: string }) { + const { t } = useTranslation() + return ( +
+ {Array.from({ length: fields }).map((_, i) => ( +
+ + +
+ ))} + +
+ ) +} + +function AppShellSkeleton() { + const { t } = useTranslation() + return ( +
+ +
+
+ +
+
+ {Array.from({ length: 6 }).map((_, i) => ( + + ))} +
+
+
+ ) +} + +export { ListSkeleton, FormSkeleton, AppShellSkeleton } diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json index 5cf3e67..54e52b6 100644 --- a/web/src/i18n/en.json +++ b/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)" }, diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json index 8022aa9..aae9a44 100644 --- a/web/src/i18n/sv.json +++ b/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)" },