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

Chakra ui theme is loading with freeze #8

Open
skorphil opened this issue Jan 24, 2024 · 8 comments
Open

Chakra ui theme is loading with freeze #8

skorphil opened this issue Jan 24, 2024 · 8 comments
Assignees
@skorphil
Labels
help wanted Extra attention is needed
Milestone
Initial project s...

Comments

@skorphil
Copy link
Owner

darktheme glitch (2)

Probably the problem is because server component which returns that client component is fetching data and prevent theme from loading correctly
@skorphil
Copy link
Owner Author

chakra-ui/chakra-ui#8234

@skorphil
Copy link
Owner Author

Tried to remove fetching from root component. It is not fixing a problem. Might be it is caused by slower loading of layout
Screenshot 2024-01-24 at 20 50 58

@skorphil
Copy link
Owner Author

skorphil commented Jan 24, 2024 •
edited
Loading

This is due to pre-rendering mechanisms.
It can be avoided by disabling nextjs SSR:

const RecordForm = dynamic(
  () => import("CLIENT component with chakraUI components"),
  {
    ssr: false,
  }
);

But what are conventions?

I compared first contentful paint timings

SSR Time
false ~1250ms
true ~350ms

Drawbacks of prerendering: input fields will be reset after app loading is fully finished. So need some skeleton maybe.
Another issue - white theme pre-rendered by default if the browser in light mode. How to switch it?

@skorphil
Copy link
Owner Author

@skorphil skorphil added the enhancement New feature or request label Jan 24, 2024
@skorphil
Copy link
Owner Author

https://nextjs.org/docs/app/building-your-application/rendering/client-components#how-are-client-components-rendered

@skorphil skorphil self-assigned this Jan 25, 2024
@skorphil skorphil mentioned this issue Jan 25, 2024
Closed
@skorphil
Copy link
Owner Author

https://www.reddit.com/r/nextjs/comments/19f48ey/how_can_i_style_prerendered_static_version_of_an/

@skorphil skorphil added help wanted Extra attention is needed and removed enhancement New feature or request labels Jan 25, 2024
@skorphil
Copy link
Owner Author

skorphil commented Jan 26, 2024 •
edited
Loading

Increased speed of loading chackra theme (with ssr enabled) by adding theme script to layout.jsx at the beginning of a body https://chakra-ui.com/docs/styled-system/color-mode#adding-the-colormodescript

import { ColorModeScript } from "@chakra-ui/react";
import theme from "./ChakraTheme";


<body>
        <ColorModeScript initialColorMode={theme.config.initialColorMode} />

but still there is 100-200ms blinking at the start of reloading process

blink.mov
performance.mov

@skorphil
Copy link
Owner Author

Kinda fixed it by editing app/globals.css, but there might be some way to immediately load correct theme avoiding altering CSS after loading is finished

@skorphil skorphil added this to the Initial project set up milestone Mar 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@skorphil skorphil

Labels
help wanted Extra attention is needed
Projects
piggy-tracker-form
Status: No status
Milestone
Initial project set up
Development

No branches or pull requests
1 participant
@skorphil