search

skorphil / nextjs-form

Educational NextJs project to build a complex mobile-first form
https://www.chromatic.com/library?appId=65b2882ac1586a6b21cba0dd
MIT License
3 stars 0 forks source link

Chakra ui theme is loading with freeze #8

Open skorphil opened 7 months ago

skorphil commented 7 months ago

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 commented 7 months ago

https://github.com/chakra-ui/chakra-ui/discussions/8234

skorphil commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago
skorphil commented 7 months ago

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

skorphil commented 7 months ago

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

skorphil commented 7 months ago

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

https://github.com/skorphil/piggy-tracker-form/assets/6762009/23c40efb-5907-4799-982c-fc059a2e48cf

https://github.com/skorphil/piggy-tracker-form/assets/6762009/00589568-dad9-46b7-bd26-d14daeba4dea

skorphil commented 7 months ago

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