refactor: move DataProvider to app level with deferred loading

src/app/App.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import PageFooter from '@widgets/PageFooter';
 import PageNavBar from '@widgets/PageNavBar';
 
@@ -9,12 +11,37 @@ import './index.css';
 
 function App() {
   return (
-    <HoverCardProvider>
-      <PageNavBar />
-      <PageRoutes />
-      <PageFooter />
-    </HoverCardProvider>
+    <DeferredDataProviders>
+      <HoverCardProvider>
+        <PageNavBar />
+        <PageRoutes />
+        <PageFooter />
+      </HoverCardProvider>
+    </DeferredDataProviders>
   );
 }
 
+const DeferredDataProviders: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [PageParamsProvider, setPageParamsProvider] = React.useState<
+    React.ComponentType<{ children: React.ReactNode }> | undefined
+  >(undefined);
+  const [DataProvider, setDataProvider] = React.useState<
+    React.ComponentType<{ children: React.ReactNode }> | undefined
+  >(undefined);
+
+  React.useEffect(() => {
+    import('@features/params/PageParamsProvider').then((m) =>
+      setPageParamsProvider(() => m.default),
+    );
+    import('@features/data/context/DataProvider').then((m) => setDataProvider(() => m.default));
+  }, []);
+  if (!PageParamsProvider || !DataProvider) return children;
+
+  return (
+    <PageParamsProvider>
+      <DataProvider>{children}</DataProvider>
+    </PageParamsProvider>
+  );
+};
+
 export default App;

src/pages/DataPage.tsx

@@ -3,34 +3,20 @@ import React, { Suspense } from 'react';
 import DetailsPanel from '@widgets/details/DetailsPanel';
 import Loading from '@widgets/Loading';
 
-import HoverCardProvider from '@features/layers/hovercard/HoverCardProvider';
-
-const FilterPanelProvider = React.lazy(() => import('@widgets/controls/FilterPanelProvider'));
-const PageParamsProvider = React.lazy(() => import('@features/params/PageParamsProvider'));
-const DataProvider = React.lazy(() => import('@features/data/context/DataProvider'));
 const DataPageBody = React.lazy(() => import('./DataPageBody'));
 const OptionsPanel = React.lazy(() => import('@widgets/controls/OptionsPanel'));
 const ViewModal = React.lazy(() => import('@features/layers/modal/ViewModal'));
 
 const DataPage: React.FC = () => {
-  /* DataProvider and many other data components have more lines of code so they are loaded lazily */
+  /* Many data components have more lines of code so they are loaded lazily */
   return (
     <Suspense fallback={<Loading />}>
-      <PageParamsProvider>
-        <HoverCardProvider>
-          {/* HoverCardProvider is re-declared so it has access to page parameters, there may be a better way to organize it */}
-          <DataProvider>
-            <FilterPanelProvider>
-              <div style={{ display: 'flex', height: '100vh' }}>
-                <OptionsPanel />
-                <DataPageBody />
-                <DetailsPanel />
-              </div>
-            </FilterPanelProvider>
-            <ViewModal />
-          </DataProvider>
-        </HoverCardProvider>
-      </PageParamsProvider>
+      <div style={{ display: 'flex', height: '100vh' }}>
+        <OptionsPanel />
+        <DataPageBody />
+        <DetailsPanel />
+      </div>
+      <ViewModal />
     </Suspense>
   );
 };