From 2d64213411acacbf6cc2d0a97209c7ebe6a34636 Mon Sep 17 00:00:00 2001
From: Joshua Ryder <ryderjj89@outlook.com>
Date: Thu, 2 Oct 2025 00:28:47 -0400
Subject: [PATCH] Fix hydration mismatch by wrapping sermon sections in
 ClientOnly

---
 pages/index.vue | 40 ++++++++++++++++++++++++----------------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 64ee622..14f68b6 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -46,26 +46,34 @@
 
     <!-- Main Content -->
     <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 space-y-12">
-      <!-- Today's Sermon -->
-      <div v-if="todaysSermon">
-        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <SermonCard :sermon="todaysSermon" />
+      <ClientOnly>
+        <!-- Today's Sermon -->
+        <div v-if="todaysSermon">
+          <h2 class="text-2xl font-semibold text-gray-900 mb-6">Today's Sermon</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <SermonCard :sermon="todaysSermon" />
+          </div>
         </div>
-      </div>
 
-      <!-- Upcoming Sermons -->
-      <div v-if="upcomingSermons.length > 0">
-        <h2 class="text-2xl font-semibold text-gray-900 mb-6">Upcoming Sermons</h2>
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <SermonCard v-for="sermon in upcomingSermons" :key="sermon.id" :sermon="sermon" />
+        <!-- Upcoming Sermons -->
+        <div v-if="upcomingSermons.length > 0">
+          <h2 class="text-2xl font-semibold text-gray-900 mb-6">Upcoming Sermons</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <SermonCard v-for="sermon in upcomingSermons" :key="sermon.id" :sermon="sermon" />
+          </div>
         </div>
-      </div>
 
-      <!-- Empty State (if no current or upcoming sermons) -->
-      <div v-if="!hasCurrentSermons" class="text-center py-12">
-        <p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
-      </div>
+        <!-- Empty State (if no current or upcoming sermons) -->
+        <div v-if="!hasCurrentSermons" class="text-center py-12">
+          <p class="text-gray-500 text-lg">No upcoming sermons available yet.</p>
+        </div>
+
+        <template #fallback>
+          <div class="text-center py-12">
+            <p class="text-gray-500 text-lg">Loading sermons...</p>
+          </div>
+        </template>
+      </ClientOnly>
 
       <!-- Previous Sermons Dropdown -->
       <div v-if="previousSermons.length > 0" class="max-w-2xl mx-auto">