Merge pull request #5790 from marmelab/Fix-demo-loading

[Demo] Fix double spinner on loading and TS warnings

examples/demo/.gitignore

@@ -15,6 +15,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.eslintcache
 
 npm-debug.log*
 yarn-debug.log*

examples/demo/package.json

@@ -26,7 +26,7 @@
         "react-redux": "^7.1.0",
         "react-router": "^5.1.0",
         "react-router-dom": "^5.1.0",
-        "react-scripts": "^4.0.0",
+        "react-scripts": "^4.0.1",
         "recharts": "^1.8.5",
         "redux-saga": "^1.0.0"
     },

examples/demo/src/App.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { Admin, Resource, DataProvider } from 'react-admin';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 
@@ -17,9 +17,6 @@ import invoices from './invoices';
 import categories from './categories';
 import reviews from './reviews';
 
-import dataProviderFactory from './dataProvider';
-import fakeServerFactory from './fakeServer';
-
 const i18nProvider = polyglotI18nProvider(locale => {
     if (locale === 'fr') {
         return import('./i18n/fr').then(messages => messages.default);
@@ -29,37 +26,13 @@ const i18nProvider = polyglotI18nProvider(locale => {
     return englishMessages;
 }, 'en');
 
-const App = () => {
-    const [dataProvider, setDataProvider] = useState<DataProvider>();
-
-    useEffect(() => {
-        let restoreFetch;
-
-        const fetchDataProvider = async () => {
-            restoreFetch = await fakeServerFactory(
-                process.env.REACT_APP_DATA_PROVIDER || ''
-            );
-            const dataProviderInstance = await dataProviderFactory(
-                process.env.REACT_APP_DATA_PROVIDER || ''
-            );
-            setDataProvider(
-                // GOTCHA: dataProviderInstance can be a function
-                () => dataProviderInstance
-            );
-        };
+interface AppProps {
+    onUnmount: () => void;
+    dataProvider: DataProvider;
+}
 
-        fetchDataProvider();
-
-        return restoreFetch;
-    }, []);
-
-    if (!dataProvider) {
-        return (
-            <div className="loader-container">
-                <div className="loader">Loading...</div>
-            </div>
-        );
-    }
+const App = ({ onUnmount, dataProvider }: AppProps) => {
+    useEffect(() => onUnmount, [onUnmount]);
 
     return (
         <Admin

examples/demo/src/index.tsx

@@ -3,6 +3,30 @@ import 'react-app-polyfill/stable';
 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';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+/**
+ * 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 dataProvider = await dataProviderFactory(
+        process.env.REACT_APP_DATA_PROVIDER || ''
+    );
+    const restoreFetch = await fakeServerFactory(
+        process.env.REACT_APP_DATA_PROVIDER || ''
+    );
+    return { dataProvider, restoreFetch };
+};
+
+prepareDataProvider().then(({ dataProvider, restoreFetch }) => {
+    ReactDOM.render(
+        <App dataProvider={dataProvider} onUnmount={restoreFetch} />,
+        document.getElementById('root')
+    );
+});

examples/tutorial/package.json

@@ -8,7 +8,7 @@
         "react": "^17.0.0",
         "react-admin": "^3.9.0",
         "react-dom": "^17.0.0",
-        "react-scripts": "^4.0.0"
+        "react-scripts": "^4.0.1"
     },
     "scripts": {
         "start": "react-scripts start",

package.json

@@ -44,8 +44,8 @@
         "@types/jest": "^26.0.15",
         "@types/react": "^16.9.56",
         "@types/react-redux": "^7.1.1",
-        "@typescript-eslint/eslint-plugin": "^3.10.1",
-        "@typescript-eslint/parser": "^3.10.1",
+        "@typescript-eslint/eslint-plugin": "^4.9.1",
+        "@typescript-eslint/parser": "^4.9.1",
         "babel-eslint": "^10.1.0",
         "cheerio": "~1.0.0-rc.2",
         "concurrently": "^5.1.0",

packages/ra-ui-materialui/src/field/ArrayField.tsx

@@ -19,7 +19,11 @@ const initialState = {
     ids: [],
 };
 
-const getDataAndIds = (record: object, source: string, fieldKey: string) => {
+const getDataAndIds = (
+    record: object,
+    source: string,
+    fieldKey: string
+): State => {
     const list = get(record, source);
     if (!list) {
         return initialState;