loading text is not working correctly and showing "ra.loading.page"

[Rvey]

API Platform version(s) affected: "@api-platform/admin": "^4.0.7"

What you were expecting:
showing proper loading message

What happened instead:
it shows ra.loading.page

Steps to reproduce:
create new project and working with HydraAdmin component from "@api-platform/admin"

Related code:

// in src/components/AdminApp.tsx
import { Resource, DataProvider, CustomRoutes, Loading } from 'react-admin'

import { hydraDataProvider, fetchHydra } from '@api-platform/admin'
import { HydraAdmin } from '@api-platform/admin'
...

const AdminApp = () => {
  const dataProvider = useRef<DataProvider>()

  dataProvider.current = hydraDataProvider({
    entrypoint: ENTRYPOINT,
    httpClient: (url: URL, options = {}) =>
      fetchHydra(url, {
        ...options,
        headers: {
          Authorization: `Bearer ${localStorage.getItem('token')}`,
        },
      }),
    apiDocumentationParser: apiDocumentationParser(localStorage.getItem('token')),
  })

  return (
    <HydraAdmin
      authProvider={authProvider}
      loginPage={LoginPage}
      dataProvider={dataProvider.current}
      entrypoint={ENTRYPOINT}
      loading={() => <Loading loadingPrimary="loading ..." loadingSecondary="please wait" />}
      layout={Layout}
    >
   ...
    </HydraAdmin>
  )
}

export default AdminApp

Environment

• React-admin version: 5.8.3
• Last version that did not exhibit the issue (if applicable): 4.7.4
• React version: 19.1.0
• Browser: chrome
• Stack trace (in case of a JS error): nan

Possible Solution
marmelab/react-admin#10813 (comment)
as mentioned by react admin maintainer : It seems the loading prop isn't propagated correctly: https://github.com/api-platform/admin/blob/main/src/core/AdminResourcesGuesser.tsx#L61C3-L61C10

Additional Context

[slax57]

Thank you for this report.

I can't reproduce your issue.

I made the following diffs to the storybook included in this repo:

src/stories/auth/basicAuth.ts:

-  getPermissions: () => Promise.resolve(''),
+  getPermissions: () =>
+    new Promise((resolve) => {
+      setTimeout(() => {
+        resolve('');
+      }, 5000);
+    }),

src/stories/auth/Admin.tsx:

import React from 'react';
import { HydraAdmin, type HydraAdminProps } from '../../hydra';
import authProvider from './basicAuth';
import DevtoolsLayout from '../layout/DevtoolsLayout';
+import ResourceGuesser from '../../core/ResourceGuesser';

/**
 * # Protected `<HydraAdmin>`
 * The `<HydraAdmin>` component protected by the `authProvider` which is a basic authentication provider.
 *
 * Login with: john/123
 */
const Admin = ({ entrypoint }: JwtAuthProps) => (
  <HydraAdmin
    entrypoint={entrypoint}
    authProvider={authProvider}
    requireAuth
    layout={DevtoolsLayout}
-  />
+    loading={() => <div>Loading TEST</div>}>
+    {() => <ResourceGuesser name="greetings" />}
+  </HydraAdmin>
);

export default Admin;

export interface JwtAuthProps extends Pick<HydraAdminProps, 'entrypoint'> {}

And I can see my custom loading component alright when browsing http://localhost:3000/?path=/story/admin-auth--loggedin.

Can you please provide a reproduction based on this story?

Side note: If the issue is about seing ra.loading.page instead of a proper loading message, then maybe you need to check your i18n configuration instead.