Merge pull request #5560 from thcolin/fix/login-page-theme

Fix Loading route missing theme with LoadingPage

Author: fzaninotto

packages/ra-core/src/core/CoreAdminRouter.tsx

@@ -17,6 +17,7 @@ import {
     CustomRoutes,
     CatchAllComponent,
     LayoutComponent,
+    LoadingComponent,
     CoreLayoutProps,
     ResourceProps,
     RenderResourcesFunction,
@@ -28,7 +29,7 @@ export interface AdminRouterProps extends CoreLayoutProps {
     catchAll: CatchAllComponent;
     children?: AdminChildren;
     customRoutes?: CustomRoutes;
-    loading: ComponentType;
+    loading: LoadingComponent;
     ready?: ComponentType;
 }
 
@@ -101,7 +102,7 @@ const CoreAdminRouter: FunctionComponent<AdminRouterProps> = props => {
         children,
         customRoutes,
         dashboard,
-        loading,
+        loading: LoadingPage,
         logout,
         menu,
         ready,
@@ -121,7 +122,13 @@ const CoreAdminRouter: FunctionComponent<AdminRouterProps> = props => {
         (!computedChildren || computedChildren.length === 0)
     ) {
         if (oneSecondHasPassed) {
-            return <Route path="/" key="loading" component={loading} />;
+            return (
+                <Route
+                    path="/"
+                    key="loading"
+                    render={() => <LoadingPage theme={theme} />}
+                />
+            );
         } else {
             return null;
         }

packages/ra-core/src/core/CoreAdminUI.tsx

@@ -13,6 +13,7 @@ import {
     CatchAllComponent,
     CustomRoutes,
     DashboardComponent,
+    LoadingComponent,
 } from '../types';
 
 export type ChildrenFunction = () => ComponentType[];
@@ -27,7 +28,7 @@ export interface AdminUIProps {
     customRoutes?: CustomRoutes;
     dashboard?: DashboardComponent;
     layout?: LayoutComponent;
-    loading?: ComponentType;
+    loading?: LoadingComponent;
     loginPage?: LoginComponent | boolean;
     logout?: ComponentType;
     menu?: ComponentType;

packages/ra-core/src/types.ts

@@ -409,6 +409,11 @@ export interface CoreLayoutProps {
 }
 
 export type LayoutComponent = ComponentType<CoreLayoutProps>;
+export type LoadingComponent = ComponentType<{
+    theme?: ThemeOptions;
+    loadingPrimary?: string;
+    loadingSecondary?: string;
+}>;
 
 export interface ResourceComponentInjectedProps {
     basePath?: string;

packages/ra-ui-materialui/src/layout/LoadingPage.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import Loading from './Loading';
+
+const LoadingPage = ({ theme, ...props }) => (
+    <ThemeProvider theme={theme}>
+        <Loading {...props} />
+    </ThemeProvider>
+);
+
+LoadingPage.propTypes = {
+    theme: PropTypes.object,
+    classes: PropTypes.object,
+    className: PropTypes.string,
+    loadingPrimary: PropTypes.string,
+    loadingSecondary: PropTypes.string,
+};
+
+LoadingPage.defaultProps = {
+    theme: createMuiTheme({}),
+    loadingPrimary: 'ra.page.loading',
+    loadingSecondary: 'ra.message.loading',
+};
+
+export default LoadingPage;

packages/ra-ui-materialui/src/layout/index.ts

@@ -8,6 +8,7 @@ import Error, { ErrorProps } from './Error';
 import HideOnScroll, { HideOnScrollProps } from './HideOnScroll';
 import Layout, { LayoutProps } from './Layout';
 import Loading from './Loading';
+import LoadingPage from './LoadingPage';
 import LinearProgress from './LinearProgress';
 import LoadingIndicator from './LoadingIndicator';
 import Menu, { MenuProps } from './Menu';
@@ -32,6 +33,7 @@ export {
     HideOnScroll,
     Layout,
     Loading,
+    LoadingPage,
     LinearProgress,
     LoadingIndicator,
     Menu,

packages/react-admin/src/AdminRouter.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { FC } from 'react';
 import { CoreAdminRouter, AdminRouterProps } from 'ra-core';
-import { Loading } from 'ra-ui-materialui';
+import { LoadingPage } from 'ra-ui-materialui';
 
 const AdminRouter: FC<AdminRouterProps> = props => (
     <CoreAdminRouter {...props} />
 );
 
 AdminRouter.defaultProps = {
-    loading: Loading,
+    loading: LoadingPage,
 };
 
 export default AdminRouter;

packages/react-admin/src/AdminUI.tsx

@@ -3,7 +3,7 @@ import { FC } from 'react';
 import { CoreAdminUI, AdminUIProps } from 'ra-core';
 import {
     Layout as DefaultLayout,
-    Loading,
+    LoadingPage,
     Login,
     Logout,
     NotFound,
@@ -14,7 +14,7 @@ const AdminUI: FC<AdminUIProps> = props => <CoreAdminUI {...props} />;
 AdminUI.defaultProps = {
     layout: DefaultLayout,
     catchAll: NotFound,
-    loading: Loading,
+    loading: LoadingPage,
     loginPage: Login,
     logout: Logout,
 };