Optimize demo data loading

examples/demo/src/App.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useEffect } from 'react';
-import { Admin, Resource, DataProvider } from 'react-admin';
+import { Admin, Resource } from 'react-admin';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 
 import authProvider from './authProvider';
@@ -16,6 +15,7 @@ import products from './products';
 import invoices from './invoices';
 import categories from './categories';
 import reviews from './reviews';
+import dataProviderFactory from './dataProvider';
 
 const i18nProvider = polyglotI18nProvider(locale => {
     if (locale === 'fr') {
@@ -26,18 +26,13 @@ const i18nProvider = polyglotI18nProvider(locale => {
     return englishMessages;
 }, 'en');
 
-interface AppProps {
-    onUnmount: () => void;
-    dataProvider: DataProvider;
-}
-
-const App = ({ onUnmount, dataProvider }: AppProps) => {
-    useEffect(() => onUnmount, [onUnmount]);
-
+const App = () => {
     return (
         <Admin
             title=""
-            dataProvider={dataProvider}
+            dataProvider={dataProviderFactory(
+                process.env.REACT_APP_DATA_PROVIDER || ''
+            )}
             customReducers={{ theme: themeReducer }}
             customRoutes={customRoutes}
             authProvider={authProvider}

examples/demo/src/dataProvider/index.ts

@@ -1,8 +1,55 @@
+import { DataProvider } from 'react-admin';
+import fakeServerFactory from '../fakeServer';
+
 export default (type: string) => {
-    switch (type) {
-        case 'graphql':
+    // The fake servers require to generate data, which can take some time.
+    // Here we start the server initialization but we don't wait for it to finish
+    let dataProviderPromise = getDataProvider(type);
+
+    // Instead we return this proxy which may be called immediately by react-admin if the
+    // user is already signed-in. In this case, we simply wait for the dataProvider promise
+    // to complete before requesting it the data.
+    // If the user isn't signed in, we already started the server initialization while they see
+    // the login page. By the time they come back to the admin as a signed-in user,
+    // the fake server will be initialized.
+    const dataProviderWithGeneratedData = new Proxy(defaultDataProvider, {
+        get(_, name) {
+            return (resource: string, params: any) => {
+                return dataProviderPromise.then(dataProvider =>
+                    dataProvider[name.toString()](resource, params)
+                );
+            };
+        },
+    });
+
+    return dataProviderWithGeneratedData;
+};
+
+const getDataProvider = (type: string): Promise<DataProvider> =>
+    fakeServerFactory(process.env.REACT_APP_DATA_PROVIDER || '').then(() => {
+        /**
+         * This demo can work with either a fake REST server, or a fake GraphQL server.
+         *
+         * To avoid bundling both libraries, the dataProvider and fake server factories
+         * use the import() function, so they are asynchronous.
+         */
+        if (type === 'graphql') {
             return import('./graphql').then(factory => factory.default());
-        default:
-            return import('./rest').then(provider => provider.default);
-    }
+        }
+        return import('./rest').then(provider => provider.default);
+    });
+
+const defaultDataProvider: DataProvider = {
+    // @ts-ignore
+    create: () => Promise.resolve({ data: { id: 0 } }),
+    delete: () => Promise.resolve({}),
+    deleteMany: () => Promise.resolve({}),
+    getList: () => Promise.resolve({ data: [], total: 0 }),
+    getMany: () => Promise.resolve({ data: [] }),
+    getManyReference: () => Promise.resolve({ data: [], total: 0 }),
+    // @ts-ignore
+    getOne: () => Promise.resolve({ data: {} }),
+    // @ts-ignore
+    update: () => Promise.resolve({ data: {} }),
+    updateMany: () => Promise.resolve({}),
 };

examples/demo/src/index.tsx

@@ -4,29 +4,6 @@ import 'proxy-polyfill';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
 
-import dataProviderFactory from './dataProvider';
-import fakeServerFactory from './fakeServer';
 import App from './App';
 
-/**
- * This demo can work with either a fake REST server, or a fake GraphQL server.
- *
- * To avoid bundling both libraries, the dataProvider and fake server factories
- * use the import() function, so they are asynchronous.
- */
-const prepareDataProvider = async () => {
-    const restoreFetch = await fakeServerFactory(
-        process.env.REACT_APP_DATA_PROVIDER || ''
-    );
-    const dataProvider = await dataProviderFactory(
-        process.env.REACT_APP_DATA_PROVIDER || ''
-    );
-    return { dataProvider, restoreFetch };
-};
-
-prepareDataProvider().then(({ dataProvider, restoreFetch }) => {
-    ReactDOM.render(
-        <App dataProvider={dataProvider} onUnmount={restoreFetch} />,
-        document.getElementById('root')
-    );
-});
+ReactDOM.render(<App />, document.getElementById('root'));