feat: `ThemeModeScript` - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

SutuSebastian · 2023-10-11T12:24:01Z

I have followed the Your First Code Contribution section of the Contributing guide

There is a flicker between light->dark theme on full page reload, thats due to SSR client hydration of the react components, and since the document html is being updated only after NextJS mounts, flicker occurs leading to bad UX.

Changes

create ThemeModeScript to avoid page flicker on reload (check FOUC)
add script to root layout on homepage + docs

Usage

NextJS App router

// app/layout.tsx

export default function RootLayout ({ children }) {
  return (
    <html>
      <head>
        <ThemeModeScript />
      </head>
      <body>
        {children}
      </body>
    </html>
  );
};

NextJS Pages router

// pages/_document.tsx

export default function Document () {
  return (
    <Html>
      <Head>
        <ThemeModeScript />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Before

Screen.Recording.2023-10-11.at.14.58.24.mov

After

Screen.Recording.2023-10-11.at.14.50.10.mov

vercel · 2023-10-11T12:24:06Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
flowbite-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 19, 2023 3:34pm

codecov · 2023-10-11T12:28:01Z

Codecov Report

Attention: 485 lines in your changes are missing coverage. Please review.

Comparison is base (7461173) 99.54% compared to head (1ab50ec) 93.56%.
Report is 126 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1056      +/-   ##
==========================================
- Coverage   99.54%   93.56%   -5.99%     
==========================================
  Files         163      205      +42     
  Lines        6621     8545    +1924     
  Branches      401      468      +67     
==========================================
+ Hits         6591     7995    +1404     
- Misses         30      550     +520

Files	Coverage Δ
src/components/Accordion/Accordion.tsx	`100.00% <100.00%> (ø)`
src/components/Accordion/AccordionContent.tsx	`100.00% <100.00%> (ø)`
src/components/Accordion/AccordionPanel.tsx	`100.00% <100.00%> (ø)`
src/components/Accordion/AccordionPanelContext.tsx	`88.88% <100.00%> (+1.38%)`	⬆️
src/components/Accordion/AccordionTitle.tsx	`100.00% <100.00%> (ø)`
src/components/Accordion/index.ts	`100.00% <100.00%> (ø)`
src/components/Alert/Alert.tsx	`100.00% <100.00%> (ø)`
src/components/Avatar/Avatar.tsx	`100.00% <100.00%> (ø)`
src/components/Avatar/AvatarGroup.tsx	`100.00% <100.00%> (ø)`
src/components/Avatar/AvatarGroupCounter.tsx	`100.00% <100.00%> (ø)`
... and 107 more

... and 39 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

src/theme-mode-script.tsx

…ark mode is set; add script to root layout on homepage + docs

vercel bot temporarily deployed to Preview October 11, 2023 12:25 Inactive

rluders requested changes Oct 11, 2023

View reviewed changes

src/theme-mode-script.tsx Outdated Show resolved Hide resolved

nigellima reviewed Oct 12, 2023

View reviewed changes

src/theme-mode-script.tsx Outdated Show resolved Hide resolved

vercel bot temporarily deployed to Preview October 18, 2023 13:03 Inactive

vercel bot temporarily deployed to Preview October 18, 2023 13:05 Inactive

SutuSebastian requested review from rluders and nigellima October 19, 2023 09:34

vercel bot temporarily deployed to Preview October 19, 2023 09:36 Inactive

Sebastian Sutu added 2 commits October 19, 2023 18:33

feat: create ThemeModeScript to avoid page flicker on reload when d…

857a449

…ark mode is set; add script to root layout on homepage + docs

refactor: move ThemeModeScript into components directory

1ab50ec

vercel bot temporarily deployed to Preview October 19, 2023 15:34 Inactive

rluders merged commit 4f0399b into themesberg:main Oct 19, 2023
2 of 4 checks passed

SutuSebastian deleted the feat/theme-mode/ssr-script branch October 19, 2023 15:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: `ThemeModeScript` - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

feat: `ThemeModeScript` - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

SutuSebastian commented Oct 11, 2023 •

edited

Loading

vercel bot commented Oct 11, 2023 •

edited

Loading

codecov bot commented Oct 11, 2023 •

edited

Loading

feat: ThemeModeScript - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

feat: ThemeModeScript - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

Conversation

SutuSebastian commented Oct 11, 2023 • edited Loading

Changes

Usage

Before

After

vercel bot commented Oct 11, 2023 • edited Loading

codecov bot commented Oct 11, 2023 • edited Loading

Codecov Report

feat: `ThemeModeScript` - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

feat: `ThemeModeScript` - avoid page flicker on reload on SSR application (NextJS, Remix) #1056

SutuSebastian commented Oct 11, 2023 •

edited

Loading

vercel bot commented Oct 11, 2023 •

edited

Loading

codecov bot commented Oct 11, 2023 •

edited

Loading