More progressive hydration for landing page.

Adrastus · Jun 25, 2022 · b0346c8 · b0346c8
1 parent de0a459
commit b0346c8
Showing 1 changed file with 40 additions and 39 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -37,46 +37,47 @@ export default function Home() {
             />
           </div>
         </div>
-        <h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-6 text-black dark:text-white">
-          Featured Posts
-        </h3>
-        <div className="flex gap-6 flex-col md:flex-row">
-          <BlogPostCard
-            title="Everything I Know About Style Guides, Design Systems, and Component Libraries"
-            slug="style-guides-component-libraries-design-systems"
-            gradient="from-[#D8B4FE] to-[#818CF8]"
-          />
-          <BlogPostCard
-            title="Rust Is The Future of JavaScript Infrastructure"
-            slug="rust"
-            gradient="from-[#6EE7B7] via-[#3B82F6] to-[#9333EA]"
-          />
-          <BlogPostCard
-            title="Past, Present, and Future of React State Management"
-            slug="react-state-management"
-            gradient="from-[#FDE68A] via-[#FCA5A5] to-[#FECACA]"
-          />
-        </div>
-        <Link href="/blog">
-          <a className="flex mt-8 text-gray-600 dark:text-gray-400 leading-7 rounded-lg hover:text-gray-800 dark:hover:text-gray-200 transition-all h-6">
-            Read all posts
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              className="h-6 w-6 ml-1"
-            >
-              <path
-                stroke="currentColor"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M17.5 12h-15m11.667-4l3.333 4-3.333-4zm3.333 4l-3.333 4 3.333-4z"
-              />
-            </svg>
-          </a>
-        </Link>
         <Suspense fallback={null}>
+          <h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-6 text-black dark:text-white">
+            Featured Posts
+          </h3>
+          <div className="flex gap-6 flex-col md:flex-row">
+            <BlogPostCard
+              title="Everything I Know About Style Guides, Design Systems, and Component Libraries"
+              slug="style-guides-component-libraries-design-systems"
+              gradient="from-[#D8B4FE] to-[#818CF8]"
+            />
+            <BlogPostCard
+              title="Rust Is The Future of JavaScript Infrastructure"
+              slug="rust"
+              gradient="from-[#6EE7B7] via-[#3B82F6] to-[#9333EA]"
+            />
+            <BlogPostCard
+              title="Past, Present, and Future of React State Management"
+              slug="react-state-management"
+              gradient="from-[#FDE68A] via-[#FCA5A5] to-[#FECACA]"
+            />
+          </div>
+          <Link href="/blog">
+            <a className="flex mt-8 text-gray-600 dark:text-gray-400 leading-7 rounded-lg hover:text-gray-800 dark:hover:text-gray-200 transition-all h-6">
+              Read all posts
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                className="h-6 w-6 ml-1"
+              >
+                <path
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M17.5 12h-15m11.667-4l3.333 4-3.333-4zm3.333 4l-3.333 4 3.333-4z"
+                />
+              </svg>
+            </a>
+          </Link>
+
           <h3 className="font-bold text-2xl md:text-4xl tracking-tight mb-4 mt-16 text-black dark:text-white">
             Learn React & Next.js
           </h3>