diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 89ab1e8..cb94372 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -404,17 +404,8 @@ export default function Home() {
 
   const focalPoints = useFocalPoints();
 
-  if (isLoading || !articles) {
-    return (
-      <div className="min-h-screen bg-background">
-        <Header />
-        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"><BentoSkeleton /></main>
-        <Footer />
-      </div>
-    );
-  }
-
   const shuffled = useMemo(() => {
+    if (!articles) return [];
     const arr = [...articles];
     for (let i = arr.length - 1; i > 0; i--) {
       const j = Math.floor(Math.random() * (i + 1));
@@ -459,9 +450,22 @@ export default function Home() {
     return items;
   }, [shuffled, widgets]);
 
-  const gridRows: (typeof gridItems)[] = [];
-  for (let i = 0; i < gridItems.length; i += 4) {
-    gridRows.push(gridItems.slice(i, i + 4));
+  const gridRows: (typeof gridItems)[] = useMemo(() => {
+    const rows: (typeof gridItems)[] = [];
+    for (let i = 0; i < gridItems.length; i += 4) {
+      rows.push(gridItems.slice(i, i + 4));
+    }
+    return rows;
+  }, [gridItems]);
+
+  if (isLoading || !articles) {
+    return (
+      <div className="min-h-screen bg-background">
+        <Header />
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4"><BentoSkeleton /></main>
+        <Footer />
+      </div>
+    );
   }
 
   return (