use Translate component and pass delay to story

Author: ThieryMichel

src/components/admin/loading.tsx

@@ -1,4 +1,4 @@
-import { useTimeout, useTranslate } from "ra-core";
+import { Translate, useTimeout } from "ra-core";
 import { Spinner } from "./spinner";
 
 export const Loading = (props: LoadingProps) => {
@@ -9,7 +9,6 @@ export const Loading = (props: LoadingProps) => {
     ...rest
   } = props;
   const oneSecondHasPassed = useTimeout(delay);
-  const translate = useTranslate();
   return oneSecondHasPassed ? (
     <div
       className={"flex flex-col justify-center items-center h-full"}
@@ -18,10 +17,10 @@ export const Loading = (props: LoadingProps) => {
       <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(loadingPrimary, { _: loadingPrimary })}
+          <Translate i18nKey={loadingPrimary}>{loadingPrimary}</Translate>
         </h5>
         <p className="text-primary">
-          {translate(loadingSecondary, { _: loadingSecondary })}
+          <Translate i18nKey={loadingSecondary}>{loadingSecondary}</Translate>
         </p>
       </div>
     </div>

src/stories/loading.stories.tsx

@@ -25,9 +25,15 @@ const StoryWrapper = ({
 
 const i18nProvider = polyglotI18nProvider(() => englishMessages, "en");
 
-export const Basic = ({ theme }: { theme: "system" | "light" | "dark" }) => (
+export const Basic = ({
+  theme,
+  delay,
+}: {
+  theme: "system" | "light" | "dark";
+  delay?: number;
+}) => (
   <StoryWrapper theme={theme}>
-    <Loading />
+    <Loading delay={delay} />
   </StoryWrapper>
 );
 
@@ -46,11 +52,17 @@ Basic.argTypes = {
   },
 };
 
-export const I18N = ({ theme }: { theme: "system" | "light" | "dark" }) => {
+export const I18N = ({
+  theme,
+  delay,
+}: {
+  theme: "system" | "light" | "dark";
+  delay?: number;
+}) => {
   return (
     <StoryWrapper theme={theme}>
       <I18nContextProvider value={i18nProvider}>
-        <Loading />
+        <Loading delay={delay} />
       </I18nContextProvider>
     </StoryWrapper>
   );