Layout: Fix flickering effect

Change-type: patch
balena-io-modules · Feb 6, 2023 · b6adaf2 · b6adaf2
1 parent 57e0ef3
commit b6adaf2
Showing 1 changed file with 72 additions and 40 deletions.
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
@@ -24,7 +24,7 @@ export interface LayoutProps {
 		  ) => JSX.Element);
 	contentHeader?: JSX.Element;
 	children: JSX.Element;
-	ErrorBoundary?: any; // TODO
+	ErrorBoundary?: React.ComponentType<{ children: React.ReactNode }>;
 	isSidebarCollapsed?: boolean;
 	setIsSidebarCollapsed?: (state: boolean) => void;
 }
@@ -84,17 +84,6 @@ export const Layout = ({
 		}
 	}, [mobile]);
 
-	const ErrorBoundaryComponent = React.useCallback(
-		({ children }: { children: JSX.Element }) => {
-			return ErrorBoundary ? (
-				<ErrorBoundary>{children}</ErrorBoundary>
-			) : (
-				<InternalErrorBoundary>{children}</InternalErrorBoundary>
-			);
-		},
-		[ErrorBoundary],
-	);
-
 	return (
 		<Grid
 			bg="transparent"
@@ -105,22 +94,41 @@ export const Layout = ({
 		>
 			{header && (
 				<GridItem gridArea="header">
-					<ErrorBoundaryComponent>
-						{React.isValidElement(header) ? (
-							header
-						) : typeof header === 'object' ? (
-							<Header
-								isSidebarCollapsed={isSidebarCollapsed ?? collapsed}
-								setIsSidebarCollapsed={setIsSidebarCollapsed ?? setCollapsed}
-								{...(header as HeaderProps)}
-							/>
-						) : (
-							header(
-								isSidebarCollapsed ?? collapsed,
-								setIsSidebarCollapsed ?? setCollapsed,
-							)
-						)}
-					</ErrorBoundaryComponent>
+					{ErrorBoundary ? (
+						<ErrorBoundary>
+							{React.isValidElement(header) ? (
+								header
+							) : typeof header === 'object' ? (
+								<Header
+									isSidebarCollapsed={isSidebarCollapsed ?? collapsed}
+									setIsSidebarCollapsed={setIsSidebarCollapsed ?? setCollapsed}
+									{...(header as HeaderProps)}
+								/>
+							) : (
+								header(
+									isSidebarCollapsed ?? collapsed,
+									setIsSidebarCollapsed ?? setCollapsed,
+								)
+							)}
+						</ErrorBoundary>
+					) : (
+						<InternalErrorBoundary>
+							{React.isValidElement(header) ? (
+								header
+							) : typeof header === 'object' ? (
+								<Header
+									isSidebarCollapsed={isSidebarCollapsed ?? collapsed}
+									setIsSidebarCollapsed={setIsSidebarCollapsed ?? setCollapsed}
+									{...(header as HeaderProps)}
+								/>
+							) : (
+								header(
+									isSidebarCollapsed ?? collapsed,
+									setIsSidebarCollapsed ?? setCollapsed,
+								)
+							)}
+						</InternalErrorBoundary>
+					)}
 				</GridItem>
 			)}
 			{leftSider && (
@@ -133,15 +141,27 @@ export const Layout = ({
 					{React.isValidElement(leftSider) ? (
 						leftSider
 					) : typeof leftSider === 'object' ? (
-						<ErrorBoundaryComponent>
-							<Sidebar
-								{...(!mobile && {
-									isCollapsed: isSidebarCollapsed ?? collapsed,
-									setIsCollapsed: setIsSidebarCollapsed ?? setCollapsed,
-								})}
-								{...(leftSider as SidebarProps)}
-							/>
-						</ErrorBoundaryComponent>
+						ErrorBoundary ? (
+							<ErrorBoundary>
+								<Sidebar
+									{...(!mobile && {
+										isCollapsed: isSidebarCollapsed ?? collapsed,
+										setIsCollapsed: setIsSidebarCollapsed ?? setCollapsed,
+									})}
+									{...(leftSider as SidebarProps)}
+								/>
+							</ErrorBoundary>
+						) : (
+							<InternalErrorBoundary>
+								<Sidebar
+									{...(!mobile && {
+										isCollapsed: isSidebarCollapsed ?? collapsed,
+										setIsCollapsed: setIsSidebarCollapsed ?? setCollapsed,
+									})}
+									{...(leftSider as SidebarProps)}
+								/>
+							</InternalErrorBoundary>
+						)
 					) : (
 						leftSider(
 							isSidebarCollapsed ?? collapsed,
@@ -152,7 +172,11 @@ export const Layout = ({
 			)}
 			{contentHeader && (
 				<GridItem gridArea="contentHeader">
-					{<ErrorBoundaryComponent>{contentHeader}</ErrorBoundaryComponent>}
+					{ErrorBoundary ? (
+						<ErrorBoundary>{contentHeader}</ErrorBoundary>
+					) : (
+						<InternalErrorBoundary>{contentHeader}</InternalErrorBoundary>
+					)}
 				</GridItem>
 			)}
 			<GridItem
@@ -163,11 +187,19 @@ export const Layout = ({
 				}}
 				gridArea="content"
 			>
-				<ErrorBoundaryComponent>{children}</ErrorBoundaryComponent>
+				{ErrorBoundary ? (
+					<ErrorBoundary>{children}</ErrorBoundary>
+				) : (
+					<InternalErrorBoundary>{children}</InternalErrorBoundary>
+				)}
 			</GridItem>
 			{footer && (
 				<GridItem gridArea="footer">
-					<ErrorBoundaryComponent>{footer}</ErrorBoundaryComponent>
+					{ErrorBoundary ? (
+						<ErrorBoundary>{footer}</ErrorBoundary>
+					) : (
+						<InternalErrorBoundary>{footer}</InternalErrorBoundary>
+					)}
 				</GridItem>
 			)}
 		</Grid>