Add loading indicator for post fetching and error handling

website/main.js

@@ -481,6 +481,9 @@ async function processPostQueue() {
     }
     
     isProcessingQueue = false;
+    
+    // Hide loading indicator when all posts are processed
+    hideLoadingIndicator();
 }
 
 function layoutPosts(postElements) {
@@ -504,7 +507,31 @@ function layoutPosts(postElements) {
     }, 200);
 }
 
+function showLoadingIndicator() {
+    const postsContainer = document.getElementById("posts");
+    const loadingDiv = document.createElement("div");
+    loadingDiv.id = "loading-posts";
+    loadingDiv.className = "loading-posts";
+    loadingDiv.innerHTML = `
+        <div class="loading-posts-content">
+            <div class="loading-spinner"></div>
+            Loading posts...
+        </div>
+    `;
+    postsContainer.appendChild(loadingDiv);
+}
+
+function hideLoadingIndicator() {
+    const loadingDiv = document.getElementById("loading-posts");
+    if (loadingDiv) {
+        loadingDiv.remove();
+    }
+}
+
 async function fetchPosts() {
+    // Show loading indicator
+    showLoadingIndicator();
+    
     try {
         const res = await fetch(
             "https://public.api.bsky.app/xrpc/app.bsky.feed.getAuthorFeed?actor=lit.mates.dev&limit=20&filter=posts_no_replies"
@@ -567,6 +594,19 @@ async function fetchPosts() {
 
     } catch (err) {
         console.error("Error fetching posts:", err);
+        // Hide loading indicator on error
+        hideLoadingIndicator();
+        
+        // Show error message
+        const postsContainer = document.getElementById("posts");
+        const errorDiv = document.createElement("div");
+        errorDiv.className = "loading-posts";
+        errorDiv.innerHTML = `
+            <div class="loading-posts-content" style="color: #dc2626;">
+                ⚠ Failed to load posts. Please refresh the page.
+            </div>
+        `;
+        postsContainer.appendChild(errorDiv);
     }
 }
 

website/style.css

@@ -658,4 +658,54 @@ footer a:hover {
     opacity: 0;
     transform: translateY(50px) rotate(var(--post-rotation, 0deg));
     animation: slideUpFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+}
+
+/* Loading indicator styles */
+.loading-posts {
+    text-align: center;
+    margin: 2rem auto;
+    padding: 2rem;
+    background: var(--post-bg);
+    border: 2px solid var(--post-border);
+    box-shadow: 3px 3px 0 var(--shadow-light);
+    max-width: 400px;
+    transform: rotate(-1deg);
+    color: #666;
+    font-family: inherit;
+    position: relative;
+}
+
+.loading-posts::before {
+    content: "";
+    position: absolute;
+    top: 5px;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    background-color: rgba(0, 0, 0, 0.05);
+    z-index: 0;
+    border-radius: 25%;
+    filter: blur(3px);
+}
+
+.loading-posts-content {
+    position: relative;
+    z-index: 1;
+}
+
+.loading-spinner {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 3px solid #f3f3f3;
+    border-top: 3px solid var(--accent);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }