Fixed flickering when updating layout from server-side JavaScript

FlorianLeChat · Dec 22, 2023 · 4ee84dc · 4ee84dc
1 parent 85835ec
commit 4ee84dc
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 62 deletions.
diff --git a/app/[locale]/components/layout-provider.tsx b/app/[locale]/components/layout-provider.tsx
@@ -295,67 +295,6 @@ function Layout( { children = null }: LayoutProviderProps )
 
 	return (
 		<LayoutContext.Provider value={value}>
-			<script
-				dangerouslySetInnerHTML={{
-					__html: `
-						const element = document.documentElement;
-						const classes = element.classList;
-						const [font, theme, color] = localStorage.getItem("${ storageKey }")?.split(";") ?? [];
-
-						let newFont = font;
-						let newTheme = theme;
-						let newColor = color;
-
-						if ([${ themes.map( ( name ) => `"${ name }"` ) }].includes(theme))
-						{
-							// Application du thème choisi par l'utilisateur.
-							classes.add(theme)
-
-							element.style.colorScheme = theme;
-						}
-						else
-						{
-							// Application du thème préféré par le navigateur.
-							const target = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
-
-							newTheme = target;
-
-							classes.add(target);
-
-							element.style.colorScheme = target;
-						}
-
-						if ([${ colors.map( ( name ) => `"${ name }"` ) }].includes(color))
-						{
-							// Application de la couleur choisie par l'utilisateur.
-							classes.add(color)
-						}
-						else
-						{
-							// Application de la couleur par défaut.
-							newColor = "blue";
-
-							classes.add("blue");
-						}
-
-						if ([${ fonts.map( ( name ) => `"${ name }"` ) }].includes(font))
-						{
-							// Application de la police de caractères choisie par l'utilisateur.
-							classes.add(font)
-						}
-						else
-						{
-							// Application de la police de caractères par défaut.
-							newFont = "inter";
-
-							classes.add("inter");
-						}
-
-						localStorage.setItem("${ storageKey }", newFont + ";" + newTheme + ";" + newColor);
-					`
-				}}
-			/>
-
 			{children}
 		</LayoutContext.Provider>
 	);
@@ -370,4 +309,70 @@ export default function LayoutProvider( {
 }: LayoutProviderProps )
 {
 	return <Layout>{children}</Layout>;
+}
+
+// Export du script de mise à jour de l'apparence.
+export function LayoutUpdater()
+{
+	return (
+		<script
+			dangerouslySetInnerHTML={{
+				__html: `
+const element = document.documentElement;
+const classes = element.classList;
+const [font, theme, color] = localStorage.getItem("${ storageKey }")?.split(";") ?? [];
+
+let newFont = font;
+let newTheme = theme;
+let newColor = color;
+
+if ([${ themes.map( ( name ) => `"${ name }"` ) }].includes(theme))
+{
+	// Application du thème choisi par l'utilisateur.
+	classes.add(theme)
+
+	element.style.colorScheme = theme;
+}
+else
+{
+	// Application du thème préféré par le navigateur.
+	const target = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+	newTheme = target;
+
+	classes.add(target);
+
+	element.style.colorScheme = target;
+}
+
+if ([${ colors.map( ( name ) => `"${ name }"` ) }].includes(color))
+{
+	// Application de la couleur choisie par l'utilisateur.
+	classes.add(color)
+}
+else
+{
+	// Application de la couleur par défaut.
+	newColor = "blue";
+
+	classes.add("blue");
+}
+
+if ([${ fonts.map( ( name ) => `"${ name }"` ) }].includes(font))
+{
+	// Application de la police de caractères choisie par l'utilisateur.
+	classes.add(font)
+}
+else
+{
+	// Application de la police de caractères par défaut.
+	newFont = "inter";
+
+	classes.add("inter");
+}
+
+localStorage.setItem("${ storageKey }", newFont + ";" + newTheme + ";" + newColor);`
+			}}
+		/>
+	);
 }
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
@@ -25,6 +25,7 @@ import type { Metadata, Viewport } from "next";
 
 // Importation des composants.
 import Footer from "./components/footer";
+import { LayoutUpdater } from "./components/layout-provider";
 
 const Toaster = lazy( () => import( "./components/ui/toaster" ) );
 const Recaptcha = lazy( () => import( "./components/recaptcha" ) );
@@ -227,7 +228,15 @@ export default function Layout( {
 				} as CSSProperties
 			}
 		>
+			{/* En-tête de la page */}
+			<head>
+				{/* Mise à jour de l'apparence */}
+				<LayoutUpdater />
+			</head>
+
+			{/* Corps de la page */}
 			<body className="flex min-h-screen flex-col">
+				{/* Écran de chargement de la page */}
 				<Suspense>
 					{/* Vidéo en arrière-plan */}
 					<video
@@ -242,7 +251,7 @@ export default function Layout( {
 						/>
 					</video>
 
-					{/* Basculement entre les thèmes */}
+					{/* Mise à jour de l'apparence */}
 					<LayoutProvider>
 						{/* Composant enfant */}
 						{children}