feat: Implement infinite scroll with preloader

index.hbs

@@ -7,7 +7,7 @@
 
 <div class="container mx-auto px-4">
     {{#if posts}}
-        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+        <div id="posts-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             {{#foreach posts}}
                 <article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
                     <a href="{{url}}" class="block">
@@ -34,7 +34,11 @@
             {{/foreach}}
         </div>
 
-        {{pagination}}
+        <div id="loading-spinner" class="text-center py-8 hidden">
+            <div class="inline-block animate-spin rounded-full h-8 w-8 border-4 border-[var(--brand-primary)] border-t-transparent"></div>
+            <p class="text-[var(--text-secondary)] mt-2">Loading more posts...</p>
+        </div>
+
     {{else}}
         <p class="text-center text-[var(--text-secondary)] text-2xl py-20">No posts found.</p>
     {{/if}}