Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Oct 19, 2023
Merged

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

merged 2 commits into from
Oct 19, 2023

Conversation

SutuSebastian
Copy link
Collaborator

@SutuSebastian SutuSebastian commented Oct 11, 2023 •
edited
Loading

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
Copy link

vercel bot commented Oct 11, 2023 •
edited
Loading

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
Copy link

codecov bot commented Oct 11, 2023 •
edited
Loading

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.

rluders
rluders requested changes Oct 11, 2023
View reviewed changes
src/theme-mode-script.tsx Outdated Show resolved Hide resolved
@rluders rluders merged commit 4f0399b into themesberg:main Oct 19, 2023
2 of 4 checks passed
@SutuSebastian SutuSebastian deleted the feat/theme-mode/ssr-script branch October 19, 2023 15:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rluders rluders Awaiting requested review from rluders

@nigellima nigellima Awaiting requested review from nigellima

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@SutuSebastian @rluders @nigellima