diff --git a/examples/simple/src/index.tsx b/examples/simple/src/index.tsx index 6acc3c35cbd..d7d9ad5da49 100644 --- a/examples/simple/src/index.tsx +++ b/examples/simple/src/index.tsx @@ -1,6 +1,6 @@ /* eslint react/jsx-key: off */ import * as React from 'react'; -import { Admin, Resource } from 'react-admin'; // eslint-disable-line import/no-unresolved +import { Admin, Resource, CustomRoute } from 'react-admin'; // eslint-disable-line import/no-unresolved import { render } from 'react-dom'; import { Route } from 'react-router-dom'; @@ -23,7 +23,7 @@ render( title="Example Admin" layout={Layout} customRoutes={[ - exact path="/custom" component={props => } diff --git a/packages/ra-core/src/core/CoreAdminRouter.spec.tsx b/packages/ra-core/src/core/CoreAdminRouter.spec.tsx index b0f617343a6..0d237becec7 100644 --- a/packages/ra-core/src/core/CoreAdminRouter.spec.tsx +++ b/packages/ra-core/src/core/CoreAdminRouter.spec.tsx @@ -81,10 +81,10 @@ describe('', () => { getPermissions: jest.fn().mockResolvedValue(''), }; - const { getByText } = renderWithRedux( + const { queryByText } = renderWithRedux( - + {() => [ ', () => { ); // Timeout needed because of the authProvider call await waitFor(() => { - expect(getByText('Layout')).not.toBeNull(); + expect(queryByText('Layout')).not.toBeNull(); }); history.push('/posts'); - expect(getByText('PostList')).not.toBeNull(); + expect(queryByText('PostList')).not.toBeNull(); history.push('/comments'); - expect(getByText('CommentList')).not.toBeNull(); + expect(queryByText('CommentList')).not.toBeNull(); + }); + + it('should return loading while the resources are not resolved', async () => { + const history = createMemoryHistory(); + const authProvider = { + login: jest.fn().mockResolvedValue(''), + logout: jest.fn().mockResolvedValue(''), + checkAuth: jest.fn().mockResolvedValue(''), + checkError: jest.fn().mockResolvedValue(''), + getPermissions: jest.fn().mockResolvedValue(''), + }; + const Loading = () => <>Loading; + const Custom = () => <>Custom; + + const { queryByText } = renderWithRedux( + + + , + ]} + > + {() => new Promise(() => {})} + + + + ); + // Timeout needed because of the authProvider call + await new Promise(resolve => setTimeout(resolve, 1010)); + history.push('/posts'); + expect(queryByText('Loading')).not.toBeNull(); + history.push('/foo'); + expect(queryByText('Loading')).toBeNull(); + expect(queryByText('Custom')).not.toBeNull(); }); }); diff --git a/packages/ra-core/src/core/CoreAdminRouter.tsx b/packages/ra-core/src/core/CoreAdminRouter.tsx index 25f8302386e..11396c5b561 100644 --- a/packages/ra-core/src/core/CoreAdminRouter.tsx +++ b/packages/ra-core/src/core/CoreAdminRouter.tsx @@ -107,33 +107,43 @@ const CoreAdminRouter: FunctionComponent = props => { loading: LoadingPage, logout, menu, - ready, + ready: Ready, theme, title, } = props; - if ( - (typeof children !== 'function' && !children) || - (Array.isArray(children) && children.length === 0) - ) { - return createElement(ready); + if (typeof children !== 'function' && !children) { + return ; } if ( - typeof children === 'function' && - (!computedChildren || computedChildren.length === 0) + (typeof children === 'function' && + (!computedChildren || computedChildren.length === 0)) || + (Array.isArray(children) && children.length === 0) ) { - if (oneSecondHasPassed) { - return ( - } - /> - ); - } else { - return null; - } + return ( + + {customRoutes + .filter(route => route.props.noLayout) + .map((route, key) => + cloneElement(route, { + key, + render: routeProps => + renderCustomRoutesWithoutLayout( + route, + routeProps + ), + component: undefined, + }) + )} + {oneSecondHasPassed && ( + } + /> + )} + + ); } const childrenToRender = (typeof children === 'function' @@ -167,6 +177,7 @@ const CoreAdminRouter: FunctionComponent = props => { route, routeProps ), + component: undefined, }) )} >;