It may be better to wrap a Hydration

jojowhoooo commented 1 year ago

If you wrap it in a layer of hydrate, the page will appear smoother when loading. :)

This is just a personal suggestion, or perhaps you have some other considerations.

// layout.tsx
 <html className={`${inter.variable} ${roboto.variable} ${lobster.variable}`} lang="en">
      <body className="">
        <Hydrate>
          {children}
        </Hydrate>
      </body>
      <Analytics />
      <Script src="https://assets.salesmartly.com/js/project_17337_17849_1685514262.js" strategy="afterInteractive" />
    </html>

// Hydrate.tsx
const Hydrate = ({ children }: { children: ReactNode }) => {
  const themeStore = useThemeStore();
  const [isHydrated, setIsHydrated] = useState(false);
  useEffect(() => {
    setIsHydrated(true);
  }, []);

  return (
    <Fragment>
      {isHydrated ? (
        <>{children}</>
      ) : (
        <>
          <Loading />
        </>
      )}
    </Fragment>
  );
};

export default Hydrate;

sadmann7 commented 1 year ago

I have a useMounted hook for that. Using it in some client components. Thanks for your suggestion. I will look into it

jojowhoooo commented 1 year ago

Let me take a look at the documentation and have a try for usehooks-ts. It feels good

sadmann7 / skateshop

It may be better to wrap a Hydration #26