Skip to content

Commit

Permalink
💎 style(fixed ui): delayed component rendering (#85)
Browse files Browse the repository at this point in the history
  • Loading branch information
Ktbch authored Jul 25, 2024
1 parent 0b11381 commit b4591d6
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 1 deletion.
7 changes: 6 additions & 1 deletion src/frontend/_layouts/app/IsSignedIn.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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}</>;
Expand Down
19 changes: 19 additions & 0 deletions src/frontend/components/app/delay-rendering.tsx
Original file line number Diff line number Diff line change
@@ -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>;
}

0 comments on commit b4591d6

Please sign in to comment.