feat: Implement infinite scroll with preloader
This commit is contained in:
@@ -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}}
|
||||
|
||||
Reference in New Issue
Block a user