Add Suspense

src/components/Dialog/ManagedModeDialog.tsx

@@ -48,7 +48,9 @@ export const ManagedModeDialog = ({
             onChange={() => setConfirmState(!confirmState)}
             name="confirmUnderstanding"
           >
-            {t("managedMode.confirmUnderstanding")}
+            <p className="dark:text-white pt-1">
+              {t("managedMode.confirmUnderstanding")}
+            </p>
           </Checkbox>
         </div>
         <DialogFooter>

src/components/PageComponents/Config/ConfigSuspender.tsx

@@ -0,0 +1,37 @@
+import {
+  useDevice,
+  ValidConfigType,
+  ValidModuleConfigType,
+} from "@core/stores/deviceStore.ts";
+import { useEffect, useState } from "react";
+
+export function ConfigSuspender({
+  configCase,
+  moduleConfigCase,
+  children,
+}: {
+  configCase?: ValidConfigType;
+  moduleConfigCase?: ValidModuleConfigType;
+  children: React.ReactNode;
+}) {
+  const { config, moduleConfig } = useDevice();
+
+  let cfg = undefined;
+  if (configCase) {
+    cfg = config[configCase];
+  } else if (moduleConfigCase) {
+    cfg = moduleConfig[moduleConfigCase];
+  } else {
+    return children;
+  }
+
+  const [ready, setReady] = useState(() => cfg !== undefined);
+
+  useEffect(() => {
+    if (cfg !== undefined) setReady(true);
+  }, [cfg]);
+
+  if (!ready) throw new Promise(() => {}); // triggers suspense fallback
+
+  return children;
+}

src/pages/Config/DeviceConfig.tsx

@@ -12,11 +12,13 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.tsx";
+import { Spinner } from "@components/UI/Spinner.tsx";
 import { useTranslation } from "react-i18next";
 import { useDevice, type ValidConfigType } from "@core/stores/deviceStore.ts";
 import { useMemo } from "react";
-import type { ComponentType } from "react";
+import { type ComponentType, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
+import { ConfigSuspender } from "@components/PageComponents/Config/ConfigSuspender.tsx";
 
 interface ConfigProps {
   // We can get rid of this exception if we import every config schema and pass the union type
@@ -105,7 +107,11 @@ export const DeviceConfig = ({ onFormInit }: ConfigProps) => {
       </TabsList>
       {tabs.map((tab) => (
         <TabsContent key={tab.label} value={tab.label}>
-          <tab.element onFormInit={onFormInit} />
+          <Suspense fallback={<Spinner size="lg" className="my-5" />}>
+            <ConfigSuspender configCase={tab.case}>
+              <tab.element onFormInit={onFormInit} />
+            </ConfigSuspender>
+          </Suspense>
         </TabsContent>
       ))}
     </Tabs>

src/pages/Config/ModuleConfig.tsx

@@ -16,14 +16,16 @@ import {
   TabsList,
   TabsTrigger,
 } from "@components/UI/Tabs.tsx";
+import { Spinner } from "@components/UI/Spinner.tsx";
 import { useTranslation } from "react-i18next";
 import {
   useDevice,
   type ValidModuleConfigType,
 } from "@core/stores/deviceStore.ts";
 import { useMemo } from "react";
-import type { ComponentType } from "react";
+import { type ComponentType, Suspense } from "react";
 import type { UseFormReturn } from "react-hook-form";
+import { ConfigSuspender } from "@components/PageComponents/Config/ConfigSuspender.tsx";
 
 interface ConfigProps {
   // We can get rid of this exception if we import every config schema and pass the union type
@@ -128,7 +130,11 @@ export const ModuleConfig = ({ onFormInit }: ConfigProps) => {
       </TabsList>
       {tabs.map((tab) => (
         <TabsContent key={tab.label} value={tab.label}>
-          <tab.element onFormInit={onFormInit} />
+          <Suspense fallback={<Spinner size="lg" className="my-5" />}>
+            <ConfigSuspender moduleConfigCase={tab.case}>
+              <tab.element onFormInit={onFormInit} />
+            </ConfigSuspender>
+          </Suspense>
         </TabsContent>
       ))}
     </Tabs>