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
https://github.com/marmelab/react-admin/issues/10813#event-18381437700 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.

[endrits079]

@slax57 The issue has started to happen since version 4.0.5 in AdminGuesser, the loading component is used outside of TranslationsProvider and also a static Loading component is being used which is preventing the custom loading component to show up and translations of course are not accessible. This commit seems to be the issue https://github.com/api-platform/admin/commit/c164fe7b9d3e8ea13af67d48b5c4847562f84901

[slax57]

Thank you @endrits079 for the analysis! This seems to make sense indeed. I'll try to come up with a fix when I can. In the meantime, if anyone is willing to give it a try, feel free to open a PR and I will gladly review it!