Loading spinner by feed

static/css/style.css

@@ -298,7 +298,9 @@ button:disabled {
 }
 
 .feed-name {
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding: 0.15rem;
     margin: 0.25rem 0;
     color: var(--text-color);
@@ -314,6 +316,26 @@ button:disabled {
     background-color: rgba(255, 255, 255, 0.1);
 }
 
+.feed-spinner {
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+    border: 2px solid transparent;
+    border-top: 2px solid var(--text-color);
+    border-radius: 50%;
+    animation: feed-spin 1s linear infinite;
+    display: none;
+}
+
+.feed-name.loading .feed-spinner {
+    display: inline-block;
+}
+
+@keyframes feed-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 /* Dropdown styles */
 .feed-menu-button {
     position: absolute;

static/js/app.js

@@ -29,11 +29,17 @@ document.addEventListener('click', (e) => {
     }
 });
 
-function renderFeedItem(feed) {
+function openFeed(feed) {
     const name = document.createElement('span');
     name.className = 'feed-name';
     name.textContent = feed.name;
+
+    const spinner = document.createElement('div');
+    spinner.className = 'feed-spinner';
+    name.appendChild(spinner);
+
     name.onclick = async () => {
+        name.classList.add('loading');
         try {
             const response = await fetch(`/poll/${feed.feed_id}`, {
                 method: 'POST'
@@ -46,6 +52,8 @@ function renderFeedItem(feed) {
             }
         } catch (error) {
             console.error('Error polling feed:', error);
+        } finally {
+            name.classList.remove('loading');
         }
     };
 
@@ -104,7 +112,7 @@ async function handleFeeds() {
             feedList.appendChild(emptyMessage);
         } else {
             feeds.forEach(feed => {
-                feedList.appendChild(renderFeedItem(feed));
+                feedList.appendChild(openFeed(feed));
             });
         }
     } else {