xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-05 23:15:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix: prevent theme flashing with Cloudflare Rocket Loader

Browse Source 
Add data-cfasync attribute to next-themes script injection to disable
Cloudflare Rocket Loader for the theme script, preventing FOUC (flash
of unstyled content) when the page loads.
This commit is contained in:
Xevion
2025-10-23 01:06:55 -05:00
parent 852277d648
commit 0f5e3ea56a
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/_app.tsx
View File

@@ -1,6 +1,6 @@
import { type AppType } from "next/dist/shared/lib/utils";
import { ThemeProvider } from "next-themes";
import { Theme } from "@radix-ui/themes"; import { Theme } from "@radix-ui/themes";
import { ThemeProvider } from "next-themes";
import { type AppType } from "next/dist/shared/lib/utils";
import "@fontsource-variable/inter"; import "@fontsource-variable/inter";
import "@fontsource/ibm-plex-mono/400.css"; import "@fontsource/ibm-plex-mono/400.css";
@@ -10,7 +10,12 @@ import "@/styles/globals.css";
const MyApp: AppType = ({ Component, pageProps }) => { const MyApp: AppType = ({ Component, pageProps }) => {
return ( return (
<ThemeProvider attribute="class" defaultTheme="system"> <ThemeProvider
attribute="class"
defaultTheme="system"
// Cloudflare Rocket Loader breaks the script injection and causes theme flashing
scriptProps={{ "data-cfasync": "false" }}
>
<Theme accentColor="indigo" grayColor="slate" radius="medium" scaling="100%"> <Theme accentColor="indigo" grayColor="slate" radius="medium" scaling="100%">
<Component {...pageProps} /> <Component {...pageProps} />
</Theme> </Theme>