Dom loader suspense (#625)

* WIP

* update rq

* loader

* comment

* fix query key

packages/toolpad-app/package.json

@@ -74,7 +74,7 @@
     "react-hook-form": "^7.33.1",
     "react-inspector": "^5.1.1",
     "react-is": "^18.1.0",
-    "react-query": "^3.39.1",
+    "react-query": "^4.0.0-beta.23",
     "react-router-dom": "^6.3.0",
     "react-split-pane": "^0.1.92",
     "serialize-javascript": "^6.0.0",

packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx

@@ -65,7 +65,7 @@ interface CodeComponentEditorContentProps {
 function CodeComponentEditorContent({ theme, codeComponentNode }: CodeComponentEditorContentProps) {
   const domApi = useDomApi();
 
-  const { data: typings } = useQuery<Record<string, string>>('/typings.json', async () => {
+  const { data: typings } = useQuery<Record<string, string>>(['/typings.json'], async () => {
     return fetch('/typings.json').then((res) => res.json());
   });
 

packages/toolpad-app/src/components/AppEditor/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { styled, Alert, Box, CircularProgress } from '@mui/material';
+import { styled } from '@mui/material';
 import { Route, Routes, useParams, Navigate } from 'react-router-dom';
 import { JsRuntimeProvider } from '@mui/toolpad-core/runtime';
 import PageEditor from './PageEditor';
-import DomProvider, { useDom, useDomLoader } from '../DomLoader';
+import DomProvider, { useDom } from '../DomLoader';
 import * as appDom from '../../appDom';
 import CodeComponentEditor from './CodeComponentEditor';
 import ConnectionEditor from './ConnectionEditor';
@@ -75,21 +75,9 @@ export interface EditorContentProps {
 }
 
 function EditorContent({ appId }: EditorContentProps) {
-  const domLoader = useDomLoader();
-
   return (
     <EditorRoot>
-      {domLoader.dom ? (
-        <FileEditor appId={appId} />
-      ) : (
-        <Box flex={1} display="flex" alignItems="center" justifyContent="center">
-          {domLoader.loadError ? (
-            <Alert severity="error">{domLoader.loadError}</Alert>
-          ) : (
-            <CircularProgress />
-          )}
-        </Box>
-      )}
+      <FileEditor appId={appId} />
     </EditorRoot>
   );
 }

packages/toolpad-app/src/components/DomLoader.tsx

@@ -6,25 +6,15 @@ import { update } from '../utils/immutability';
 import client from '../api';
 import useShortcut from '../utils/useShortcut';
 import useDebouncedHandler from '../utils/useDebouncedHandler';
+import { createProvidedContext } from '../utils/react';
 
 export type DomAction =
-  | {
-      type: 'DOM_LOADING';
-    }
-  | {
-      type: 'DOM_LOADED';
-      dom: appDom.AppDom;
-    }
   | {
       type: 'DOM_SAVING';
     }
   | {
       type: 'DOM_SAVED';
     }
-  | {
-      type: 'DOM_LOADING_ERROR';
-      error: string;
-    }
   | {
       type: 'DOM_SAVING_ERROR';
       error: string;
@@ -130,26 +120,6 @@ export function domLoaderReducer(state: DomLoader, action: DomAction): DomLoader
   }
 
   switch (action.type) {
-    case 'DOM_LOADING': {
-      return update(state, {
-        loading: true,
-        loadError: null,
-      });
-    }
-    case 'DOM_LOADED': {
-      return update(state, {
-        loading: false,
-        loadError: null,
-        dom: action.dom,
-        unsavedChanges: 0,
-      });
-    }
-    case 'DOM_LOADING_ERROR': {
-      return update(state, {
-        loading: false,
-        loadError: action.error,
-      });
-    }
     case 'DOM_SAVING': {
       return update(state, {
         saving: true,
@@ -165,7 +135,6 @@ export function domLoaderReducer(state: DomLoader, action: DomAction): DomLoader
     }
     case 'DOM_SAVING_ERROR': {
       return update(state, {
-        loading: false,
         saving: false,
         saveError: action.error,
       });
@@ -249,30 +218,19 @@ function createDomApi(dispatch: React.Dispatch<DomAction>) {
 }
 
 interface DomLoader {
-  dom: appDom.AppDom | null;
+  dom: appDom.AppDom;
   saving: boolean;
   unsavedChanges: number;
-  loading: boolean;
-  loadError: string | null;
   saveError: string | null;
 }
 
-const DomLoaderContext = React.createContext<DomLoader>({
-  saving: false,
-  unsavedChanges: 0,
-  loading: false,
-  loadError: null,
-  saveError: null,
-  dom: null,
-});
+const [useDomLoader, DomLoaderProvider] = createProvidedContext<DomLoader>('DomLoader');
 
 const DomApiContext = React.createContext<DomApi>(createDomApi(() => undefined));
 
 export type DomApi = ReturnType<typeof createDomApi>;
 
-export function useDomLoader(): DomLoader {
-  return React.useContext(DomLoaderContext);
-}
+export { useDomLoader };
 
 export function useDom(): appDom.AppDom {
   const { dom } = useDomLoader();
@@ -292,38 +250,20 @@ export interface DomContextProps {
 }
 
 export default function DomProvider({ appId, children }: DomContextProps) {
+  const { data: dom } = client.useQuery('loadDom', [appId], { suspense: true });
+
+  if (!dom) {
+    throw new Error(`Invariant: suspense should load the dom`);
+  }
+
   const [state, dispatch] = React.useReducer(domLoaderReducer, {
-    loading: false,
     saving: false,
     unsavedChanges: 0,
-    loadError: null,
     saveError: null,
-    dom: null,
+    dom,
   });
   const api = React.useMemo(() => createDomApi(dispatch), []);
 
-  React.useEffect(() => {
-    let canceled = false;
-
-    dispatch({ type: 'DOM_LOADING' });
-    client.query
-      .loadDom(appId)
-      .then((dom) => {
-        if (!canceled) {
-          dispatch({ type: 'DOM_LOADED', dom });
-        }
-      })
-      .catch((err) => {
-        if (!canceled) {
-          dispatch({ type: 'DOM_LOADING_ERROR', error: err.message });
-        }
-      });
-
-    return () => {
-      canceled = true;
-    };
-  }, [appId]);
-
   const lastSavedDom = React.useRef<appDom.AppDom | null>(null);
   const handleSave = React.useCallback(() => {
     if (!state.dom || lastSavedDom.current === state.dom) {
@@ -366,13 +306,13 @@ export default function DomProvider({ appId, children }: DomContextProps) {
   useShortcut({ code: 'KeyS', metaKey: true }, handleSave);
 
   return (
-    <DomLoaderContext.Provider value={state}>
+    <DomLoaderProvider value={state}>
       <DomApiContext.Provider value={api}>{children}</DomApiContext.Provider>
       <Snackbar open={!!state.saveError}>
         <Alert severity="error" sx={{ width: '100%' }}>
           Failed to save: {state.saveError}
         </Alert>
       </Snackbar>
-    </DomLoaderContext.Provider>
+    </DomLoaderProvider>
   );
 }

packages/toolpad-app/src/components/Toolpad.tsx

@@ -1,10 +1,39 @@
 import * as React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { NoSsr } from '@mui/material';
+import { Box, CircularProgress, NoSsr, styled } from '@mui/material';
+import { ErrorBoundary } from 'react-error-boundary';
 import Release from './Release';
 import Releases from './Releases';
 import AppEditor from './AppEditor';
 import Home from './Home';
+import ErrorAlert from './AppEditor/PageEditor/ErrorAlert';
+
+const Centered = styled('div')({
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+function FullPageLoader() {
+  return (
+    <Centered>
+      <CircularProgress />
+    </Centered>
+  );
+}
+
+interface FullPageErrorProps {
+  error: Error;
+}
+
+function FullPageError({ error }: FullPageErrorProps) {
+  return (
+    <Centered>
+      <ErrorAlert error={error} />
+    </Centered>
+  );
+}
 
 function AppWorkspace() {
   return (
@@ -25,14 +54,19 @@ export interface EditorProps {
 export default function Toolpad({ basename }: EditorProps) {
   return (
     <NoSsr>
-      <React.Suspense fallback="loading...">
-        <BrowserRouter basename={basename}>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/app/:appId/*" element={<AppWorkspace />} />
-          </Routes>
-        </BrowserRouter>
-      </React.Suspense>
+      {/* Container that allows children to size to it with height: 100% */}
+      <Box sx={{ height: '1px', minHeight: '100vh' }}>
+        <ErrorBoundary fallbackRender={({ error }) => <FullPageError error={error} />}>
+          <React.Suspense fallback={<FullPageLoader />}>
+            <BrowserRouter basename={basename}>
+              <Routes>
+                <Route path="/" element={<Home />} />
+                <Route path="/app/:appId/*" element={<AppWorkspace />} />
+              </Routes>
+            </BrowserRouter>
+          </React.Suspense>
+        </ErrorBoundary>
+      </Box>
     </NoSsr>
   );
 }

packages/toolpad-app/src/components/ToolpadShell.tsx

@@ -9,8 +9,8 @@ export interface ToolpadShellProps {
 }
 
 const ToolpadShellRoot = styled('div')({
-  width: '100vw',
-  height: '100vh',
+  width: '100%',
+  height: '100%',
   display: 'flex',
   flexDirection: 'column',
 });

packages/toolpad-core/package.json

@@ -35,7 +35,7 @@
     "@mui/x-data-grid-pro": "^5.12.3",
     "quickjs-emscripten": "^0.21.0",
     "react-error-boundary": "^3.1.4",
-    "react-query": "^3.39.1"
+    "react-query": "^4.0.0-beta.23"
   },
   "devDependencies": {
     "react": "^18.1.0"

yarn.lock

@@ -289,7 +289,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.18.3":
+"@babel/runtime@^7.17.9", "@babel/runtime@^7.18.3":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
   integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
@@ -2445,6 +2445,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/yargs-parser@*":
   version "21.0.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.0.tgz#0c60e537fa790f5f9472ed2776c2b71ec117351b"
@@ -7849,14 +7854,16 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-query@^3.39.1:
-  version "3.39.1"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.39.1.tgz#3876c0fdac7a3b5a84e195534e5fa8fbdd628847"
-  integrity sha512-qYKT1bavdDiQZbngWZyPotlBVzcBjDYEJg5RQLBa++5Ix5jjfbEYJmHSZRZD+USVHUSvl/ey9Hu+QfF1QAK80A==
+react-query@^4.0.0-beta.23:
+  version "4.0.0-beta.23"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-4.0.0-beta.23.tgz#76713547670ef1f991ae828b3d51df63ec6e035c"
+  integrity sha512-e6mNBVAYGy0M1OwX0mhRB/lCkOedKeqTUrbPjNCqvm8hQGUsJJobqfHVvTv8o6JJaOO2MFcxKF4vZM+PEKbHZA==
   dependencies:
-    "@babel/runtime" "^7.5.5"
+    "@babel/runtime" "^7.17.9"
+    "@types/use-sync-external-store" "^0.0.3"
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
+    use-sync-external-store "^1.1.0"
 
 react-router-dom@^6.3.0:
   version "6.3.0"
@@ -9088,6 +9095,11 @@ use-sync-external-store@1.1.0:
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz#3343c3fe7f7e404db70f8c687adf5c1652d34e82"
   integrity sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==
 
+use-sync-external-store@^1.1.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 util-deprecate@^1.0.1, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"