I'm currently working with the following code snippet.
<Suspense fallback={<span />}>
{theme === "dark" ? <DarkTheme /> : <LightTheme />}
</Suspense>
DarkTheme Component
import React from "react";
import "./dark-theme.css";
const DarkTheme = () => {
console.log("Loading dark theme...");
return <></>;
};
export default DarkTheme;
LightTheme Component
import React from "react";
import "./light-theme.css";
const LightTheme = () => {
console.log("Loading light theme...");
return <></>;
};
export default LightTheme;
Currently, when switching to dark mode, the DarkTheme component and its css load correctly. However, when switching back to light mode, the LightTheme component loads but its css does not load.
Switching to dark mode: [Click here] (https://i.sstatic.net/hZhmi.png)
Switching back to light mode: [Click here](https://i.sstatic.net/hSw2Z.png) You can view the full code here.