fix: UI Hydration issue

ever-co · Dec 29, 2023 · b907922 · b907922
1 parent f604ba0
commit b907922
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 33 deletions.
diff --git a/apps/web/lib/app/authenticator.tsx b/apps/web/lib/app/authenticator.tsx
@@ -52,36 +52,37 @@ export function withAuthentication(Component: NextPage<any, any>, params: Params
 			}
 		}, [queryCall, setUser, user]);
 
+		if (!user || loading) {
+			return <></>;
+		}
+		if ((!user || loading) && showPageSkeleton) {
+			return <TeamPageSkeleton />;
+		}
+
 		return (
-			<>
-				{(!user || loading) && showPageSkeleton ? (
-					<TeamPageSkeleton />
-				) : (
-					<>
-						<Component {...props} />
-						{user && !isTeamMember && showCreateTeamModal && (
-							<CreateTeamModal
-								open={showCreateTeamModal}
-								closeModal={() => {
-									closeModalIfNewTeamCreated();
-								}}
-								joinTeamModal={() => {
-									setShowCreateTeamModal(false);
-									setShowJoinTeamModal(true);
-								}}
-							/>
-						)}
-						{user && !isTeamMember && showJoinTeamModal && (
-							<JoinTeamModal
-								open={showJoinTeamModal}
-								closeModal={() => {
-									closeModalIfNewTeamCreated();
-								}}
-							/>
-						)}
-					</>
+			<div>
+				<Component {...props} />
+				{user && !isTeamMember && showCreateTeamModal && (
+					<CreateTeamModal
+						open={showCreateTeamModal}
+						closeModal={() => {
+							closeModalIfNewTeamCreated();
+						}}
+						joinTeamModal={() => {
+							setShowCreateTeamModal(false);
+							setShowJoinTeamModal(true);
+						}}
+					/>
+				)}
+				{user && !isTeamMember && showJoinTeamModal && (
+					<JoinTeamModal
+						open={showJoinTeamModal}
+						closeModal={() => {
+							closeModalIfNewTeamCreated();
+						}}
+					/>
 				)}
-			</>
+			</div>
 		);
 	};
 

diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -43,7 +43,7 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => {
 
 // this function changes column header color when dragged
 function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any) {
-	const backgroundColor = snapshot.isDragging ? '#0000ee' : bgColor;
+	const backgroundColor = snapshot.isDragging ? '#3826a6' : bgColor;
 
 	return {
 		backgroundColor

diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
@@ -17,7 +17,7 @@ type Props = PropsWithChildren<{
 
 export function MainLayout({ children, title, showTimer, publicTeam, notFound, className, childrenClassName }: Props) {
 	return (
-		<>
+		<div>
 			<style jsx global>
 				{`
 					:root {
@@ -48,6 +48,6 @@ export function MainLayout({ children, title, showTimer, publicTeam, notFound, c
 				</Container>
 			</div>
 			<Toaster />
-		</>
+		</div>
 	);
 }
diff --git a/apps/web/lib/layout/navbar.tsx b/apps/web/lib/layout/navbar.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import { useModal, useOrganizationTeams } from '@app/hooks';
 import { IClassName } from '@app/interfaces';
 import { userState } from '@app/stores';
@@ -59,7 +61,7 @@ export function Navbar({
 	}, [pathname]);
 
 	return (
-		<>
+		<div>
 			{!user && !notFound && !publicTeam ? (
 				<HeaderSkeleton />
 			) : (
@@ -101,6 +103,6 @@ export function Navbar({
 					<RequestToJoinModal open={isOpen} closeModal={closeModal} />
 				</nav>
 			)}
-		</>
+		</div>
 	);
 }