fix unwanted widget rerenders in HomeLayout when resizing (#1303)

factorialco · Mar 4, 2025 · 5b29a20 · 5b29a20
1 parent b33038d
commit 5b29a20
Showing 1 changed file with 38 additions and 28 deletions.
diff --git a/lib/experimental/PageLayouts/HomeLayout/index.tsx b/lib/experimental/PageLayouts/HomeLayout/index.tsx
@@ -1,4 +1,5 @@
 import { Carousel } from "@/experimental/Navigation/Carousel"
+import { cn } from "@/lib/utils"
 import {
   Children,
   forwardRef,
@@ -25,23 +26,32 @@ export const HomeLayout = forwardRef<HTMLDivElement, Props>(function HomeLayout(
 
   const canShowContent = !!width
 
-  const isSmallerScreen = canShowContent && width < 992
+  const isSmallerScreen = canShowContent && width < 1024
 
-  let arrayWidgets = Children.toArray(widgets).filter((widget) => !!widget)
-
-  if (isSmallerScreen) {
-    arrayWidgets = arrayWidgets.map((widget, i) => (
-      <div key={i} className="h-full [&>div]:h-full [&>div]:shadow-none">
+  const arrayWidgets = Children.toArray(widgets)
+    .filter((widget) => !!widget)
+    .map((widget, i) => (
+      <div
+        key={i}
+        className={cn(
+          isSmallerScreen && "h-full [&>div]:h-full [&>div]:shadow-none"
+        )}
+      >
         {widget}
       </div>
     ))
-    return (
-      <div
-        ref={ref}
-        className="flex flex-col gap-6 px-5 pb-5 pt-4 md:px-3 md:pb-3 md:pt-2"
-      >
-        {canShowContent && (
-          <>
+
+  return (
+    <div ref={ref}>
+      {canShowContent && (
+        <>
+          {/* Smaller screen content */}
+          <div
+            className={cn(
+              "flex flex-col gap-6 px-5 pb-5 pt-4 md:px-3 md:pb-3 md:pt-2",
+              !isSmallerScreen && "hidden"
+            )}
+          >
             <Carousel
               columns={{
                 xs: 1,
@@ -54,24 +64,24 @@ export const HomeLayout = forwardRef<HTMLDivElement, Props>(function HomeLayout(
               {arrayWidgets}
             </Carousel>
             <main>{children}</main>
-          </>
-        )}
-      </div>
-    )
-  }
-
-  return (
-    <div ref={ref} className="grid grid-cols-3 gap-6 px-6 pb-6 pt-2">
-      {canShowContent && (
-        <>
-          <div className="col-span-3 flex flex-row gap-6 *:flex-1">
-            {arrayWidgets.slice(0, 3)}
           </div>
 
-          <main className="col-span-2">{children}</main>
+          {/* Larger screen content */}
+          <div
+            className={cn(
+              "grid grid-cols-3 gap-6 px-6 pb-6 pt-2",
+              isSmallerScreen && "hidden"
+            )}
+          >
+            <div className="col-span-3 flex flex-row gap-6 *:flex-1">
+              {arrayWidgets.slice(0, 3)}
+            </div>
+
+            <main className="col-span-2">{children}</main>
 
-          <div className="flex flex-1 flex-col gap-6">
-            {arrayWidgets.slice(3)}
+            <div className="flex flex-1 flex-col gap-6">
+              {arrayWidgets.slice(3)}
+            </div>
           </div>
         </>
       )}