diff --git a/src/frontend/_layouts/app/IsSignedIn.tsx b/src/frontend/_layouts/app/IsSignedIn.tsx index 0a446a31..43345f7a 100644 --- a/src/frontend/_layouts/app/IsSignedIn.tsx +++ b/src/frontend/_layouts/app/IsSignedIn.tsx @@ -1,6 +1,7 @@ import type { ReactNode } from "react"; import { useEffect } from "react"; +import { Delayed } from "@/components/app/delay-rendering"; import { ComponentIsLoading } from "@/components/app/loading-component"; import { AuthActions } from "@/frontend/hooks/auth/auth.actions"; import { useToggle } from "@/frontend/hooks/state/useToggleState"; @@ -21,7 +22,11 @@ export function IsSignedIn({ children }: { children: ReactNode }) { }, [isClient]); if (renderMode.isOff) { - return ; + return ( + + + + ); } // eslint-disable-next-line react/jsx-no-useless-fragment return <>{children}; diff --git a/src/frontend/components/app/delay-rendering.tsx b/src/frontend/components/app/delay-rendering.tsx new file mode 100644 index 00000000..7642562e --- /dev/null +++ b/src/frontend/components/app/delay-rendering.tsx @@ -0,0 +1,19 @@ +import React from "react"; + +type delayedProps = { + delayWait: number; + children: React.ReactNode; +}; + +export function Delayed({ delayWait = 500, children }: delayedProps) { + const [delayed, setDelayed] = React.useState(true); + + React.useEffect(() => { + const timer = setTimeout(() => setDelayed(false), delayWait); + return () => { + clearTimeout(timer); + }; + }, [delayWait]); + + return !delayed &&
{children}
; +}