Fix: Keep MUI optional

Author: garronej

src/Display/Artwork/Artwork.tsx

@@ -1,21 +1,21 @@
 "use client";
 
-import React, { Suspense, lazy } from "react";
+import React from "react";
 import { ArtworkGov } from "./ArtworkGov";
 import { useIsGov } from "../../mui/useIsGov";
-const ArtworkWhiteLabel = lazy(() => import("./ArtworkWhiteLabel"));
+import { useArtworkWhiteLabel } from "./ArtworkWhiteLabel/useArtworkWhiteLabel";
+import { assert } from "tsafe/assert";
 
 export function Artwork(props: { theme: "light" | "dark" | "system"; className?: string }) {
     const { theme, className } = props;
 
     const { isGov } = useIsGov();
+    const { ArtworkWhiteLabel } = useArtworkWhiteLabel();
 
     if (!isGov) {
-        return (
-            <Suspense>
-                <ArtworkWhiteLabel theme={theme} sizePx={80} />
-            </Suspense>
-        );
+        assert(ArtworkWhiteLabel !== undefined);
+
+        return <ArtworkWhiteLabel theme={theme} sizePx={80} />;
     }
 
     return <ArtworkGov theme={theme} className={className} />;

src/Display/Artwork/ArtworkWhiteLabel.tsx renamed to src/Display/Artwork/ArtworkWhiteLabel/ArtworkWhiteLabel.tsx

@@ -4,10 +4,7 @@ import React from "react";
 import { useTheme } from "@mui/material/styles";
 import { assert, type Equals } from "tsafe/assert";
 
-export default function ArtworkWhiteLabel(props: {
-    theme: "light" | "dark" | "system";
-    sizePx: number;
-}) {
+export function ArtworkWhiteLabel(props: { theme: "light" | "dark" | "system"; sizePx: number }) {
     const { theme: theme_mode, sizePx } = props;
 
     const theme = useTheme();

src/Display/Artwork/ArtworkWhiteLabel/DisplayArtworkWhiteLabelProvider.tsx

@@ -0,0 +1,9 @@
+import React, { type ReactNode } from "react";
+import { context } from "./context";
+import { ArtworkWhiteLabel } from "./ArtworkWhiteLabel";
+
+export function DisplayArtworkWhiteLabelProvider(props: { children: ReactNode }) {
+    const { children } = props;
+
+    return <context.Provider value={ArtworkWhiteLabel}>{children}</context.Provider>;
+}

src/Display/Artwork/ArtworkWhiteLabel/context.ts

@@ -0,0 +1,6 @@
+import { JSX } from "../../../tools/JSX";
+import { createContext } from "react";
+
+export const context = createContext<
+    ((props: { theme: "light" | "dark" | "system"; sizePx: number }) => JSX.Element) | undefined
+>(undefined);

src/Display/Artwork/ArtworkWhiteLabel/useArtworkWhiteLabel.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { context } from "./context";
+
+export function useArtworkWhiteLabel() {
+    const ArtworkWhiteLabel = useContext(context);
+
+    return { ArtworkWhiteLabel };
+}

src/mui/mui.tsx

@@ -17,6 +17,7 @@ import { deepAssign } from "../tools/deepAssign";
 import { Global, css } from "@emotion/react";
 import { getAssetUrl } from "../tools/getAssetUrl";
 import { IsGovProvider } from "./useIsGov";
+import { DisplayArtworkWhiteLabelProvider } from "../Display/Artwork/ArtworkWhiteLabel/DisplayArtworkWhiteLabelProvider";
 import marianneFaviconSvgUrl from "../dsfr/favicon/favicon.svg";
 import blankFaviconSvgUrl from "../assets/blank-favicon.svg";
 
@@ -597,7 +598,11 @@ export function createDsfrCustomBrandingProvider(params: {
                     />
                 )}
                 <IsGovProvider isGov={isGov}>
-                    <mui.ThemeProvider theme={theme}>{children}</mui.ThemeProvider>
+                    <mui.ThemeProvider theme={theme}>
+                        <DisplayArtworkWhiteLabelProvider>
+                            {children}
+                        </DisplayArtworkWhiteLabelProvider>
+                    </mui.ThemeProvider>
                 </IsGovProvider>
             </>
         );