💎 style(fixed ui): delayed component rendering (#85)

Author: Ktbch

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 <ComponentIsLoading fullPage />;
+    return (
+      <Delayed delayWait={0}>
+        <ComponentIsLoading fullPage />
+      </Delayed>
+    );
   }
   // eslint-disable-next-line react/jsx-no-useless-fragment
   return <>{children}</>;

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 && <div>{children}</div>;
+}