add loading component

registry.json

@@ -257,6 +257,10 @@
           "path": "src/components/admin/error.tsx",
           "type": "registry:component"
         },
+        {
+          "path": "src/components/admin/loading.tsx",
+          "type": "registry:component"
+        },
         {
           "path": "src/lib/i18nProvider.ts",
           "type": "registry:lib"

src/components/admin/loading.tsx

@@ -0,0 +1,34 @@
+import { Translate, useTimeout } from "ra-core";
+import { Spinner } from "./spinner";
+
+export const Loading = (props: LoadingProps) => {
+  const {
+    loadingPrimary = "ra.page.loading",
+    loadingSecondary = "ra.message.loading",
+    delay = 1000,
+    ...rest
+  } = props;
+  const oneSecondHasPassed = useTimeout(delay);
+  return oneSecondHasPassed ? (
+    <div
+      className={"flex flex-col justify-center items-center h-full"}
+      {...rest}
+    >
+      <div className={"text-center font-sans color-muted pt-1 pb-1"}>
+        <Spinner size="large" className="width-9 height-9" />
+        <h5 className="mt-3 text-2xl text-secondary-foreground">
+          <Translate i18nKey={loadingPrimary}>{loadingPrimary}</Translate>
+        </h5>
+        <p className="text-primary">
+          <Translate i18nKey={loadingSecondary}>{loadingSecondary}</Translate>
+        </p>
+      </div>
+    </div>
+  ) : null;
+};
+
+export interface LoadingProps {
+  loadingPrimary?: string;
+  loadingSecondary?: string;
+  delay?: number;
+}

src/components/admin/spinner.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils";
+import { VariantProps, cva } from "class-variance-authority";
+import { Loader2 } from "lucide-react";
+
+const spinnerVariants = cva("flex-col items-center justify-center", {
+  variants: {
+    show: {
+      true: "flex",
+      false: "hidden",
+    },
+  },
+  defaultVariants: {
+    show: true,
+  },
+});
+
+const loaderVariants = cva("animate-spin text-primary", {
+  variants: {
+    size: {
+      small: "size-6",
+      medium: "size-8",
+      large: "size-12",
+    },
+  },
+  defaultVariants: {
+    size: "medium",
+  },
+});
+
+interface SpinnerContentProps
+  extends VariantProps<typeof spinnerVariants>,
+    VariantProps<typeof loaderVariants> {
+  className?: string;
+}
+
+export function Spinner({ size, show, className }: SpinnerContentProps) {
+  return (
+    <span className={spinnerVariants({ show })}>
+      <Loader2 className={cn(loaderVariants({ size }), className)} />
+    </span>
+  );
+}

src/stories/loading.stories.tsx

@@ -0,0 +1,84 @@
+import polyglotI18nProvider from "ra-i18n-polyglot";
+import englishMessages from "ra-language-english";
+import { I18nContextProvider } from "ra-core";
+import { Loading } from "@/components/admin/loading";
+import { ReactNode } from "react";
+import { ThemeProvider } from "@/components/admin";
+
+export default {
+  title: "Layout/Loading",
+  parameters: {
+    docs: {
+      // 👇 Enable Code panel for all stories in this file
+      codePanel: true,
+    },
+  },
+};
+
+const StoryWrapper = ({
+  children,
+  theme,
+}: {
+  children: ReactNode;
+  theme: "system" | "light" | "dark";
+}) => <ThemeProvider defaultTheme={theme}>{children}</ThemeProvider>;
+
+const i18nProvider = polyglotI18nProvider(() => englishMessages, "en");
+
+export const Basic = ({
+  theme,
+  delay,
+}: {
+  theme: "system" | "light" | "dark";
+  delay?: number;
+}) => (
+  <StoryWrapper theme={theme}>
+    <Loading delay={delay} />
+  </StoryWrapper>
+);
+
+Basic.args = {
+  theme: "system",
+};
+
+Basic.argTypes = {
+  theme: {
+    type: "select",
+    options: ["light", "dark", "system"],
+  },
+  delay: {
+    type: "number",
+    defaultValue: 1000,
+  },
+};
+
+export const I18N = ({
+  theme,
+  delay,
+}: {
+  theme: "system" | "light" | "dark";
+  delay?: number;
+}) => {
+  return (
+    <StoryWrapper theme={theme}>
+      <I18nContextProvider value={i18nProvider}>
+        <Loading delay={delay} />
+      </I18nContextProvider>
+    </StoryWrapper>
+  );
+};
+
+I18N.args = {
+  theme: "system",
+};
+
+I18N.argTypes = {
+  theme: {
+    type: "select",
+    options: ["light", "dark", "system"],
+  },
+  delay: {
+    type: "number",
+    defaultValue: 1000,
+  },
+};