Hi, I'm using a 3rd party library (UI components) thats requires to set some ClientContext on top of that it sets/reads stuff from document. & body i believe and reads localstorage.
I created a provider.tsx file for that and set "use client"; but even then it complained about document not being acessable so i did a simple:

"use client";

export const Providers = ({
  children,
  session,
}: React.PropsWithChildren<{ session: Session }>) => {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setIsClient(true);
    }
  }, []);

  if (!isClient) {
    return <Loader size="large" />; // I know this is ppointless :) 
  } else
    return (
      <ThirdPartyContextWrapper>
        <ThirdPartyLayer>
          <SessionProvider session={session}>
            <TopBar />
            {children}
          </SessionProvider>
        </ThirdPartyLayer>
      </ThirdPartyContextWrapper>
    );
};

Now, I can Wrap every single route/page with this Provider that gives me what I need. Without this context basically every single UI component available behaves like madness.
But surely ideally I'd want to shove this into my layout.tsx file? Or is it just common practice to for instance re-declare the SessionProvider (next-auth) in every page/route?