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}
;
+}