Sync loading indicators

src/main/resources/templates/fragments/artist-row.html

@@ -34,4 +34,16 @@
         </label>
         {/for}
     </div>
+
+    {#if syncing?? && syncing}
+    <div class="flex items-center gap-2 text-sm text-base-content/60 pt-1">
+        <span class="loading loading-spinner loading-xs"></span>
+        <span>Syncing releases from MusicBrainz…</span>
+    </div>
+    <div hx-get="/artists/{artist.mbid}/row"
+         hx-target="#artist-{artist.mbid}"
+         hx-swap="innerHTML"
+         hx-trigger="load delay:3s"
+         class="hidden"></div>
+    {/if}
 </div>

src/main/resources/templates/fragments/feed-list.html

@@ -11,15 +11,20 @@
 </button>
 {/if}
 {#if !hasMore && rows.empty}
-<div class="text-center text-base-content/60 py-12">
-    <p class="text-lg">No releases yet.</p>
-    <p class="text-sm">Search for an artist above and click <strong>Follow</strong> to start tracking their release groups.</p>
+{#if syncing?? && syncing}
+<div class="text-center py-12">
+    <span class="loading loading-spinner loading-lg text-primary"></span>
+    <p class="mt-3 text-base-content/70">Fetching releases from MusicBrainz…</p>
 </div>
-{/if}
-{#if autoRefresh?? && autoRefresh}
 <div hx-get="/feed?offset=0"
      hx-target="#feed-list"
      hx-swap="innerHTML"
      hx-trigger="load delay:3s"
      class="hidden"></div>
+{#else}
+<div class="text-center text-base-content/60 py-12">
+    <p class="text-lg">No releases yet.</p>
+    <p class="text-sm">Search for an artist above and click <strong>Follow</strong> to start tracking their release groups.</p>
+</div>
+{/if}
 {/if}

src/main/resources/templates/fragments/feed-row.html

@@ -2,7 +2,7 @@
     <img src="https://coverartarchive.org/release-group/{row.mbid}/front"
          alt="cover"
          loading="lazy"
-         class="cover-art w-20 h-20 object-cover shrink-0"
+         class="cover-art w-40 h-40 object-cover shrink-0"
          onerror="this.onerror=null;this.src='/img/no-cover.svg'"/>
 
     <div class="flex-1 min-w-0 flex flex-col justify-center gap-1">

src/main/resources/templates/index.html

@@ -65,7 +65,7 @@
     </div>
 </header>
 
-<main class="max-w-2xl mx-auto px-4 py-6">
+<main class="max-w-5xl mx-auto px-4 py-6">
     <section id="feed" class="space-y-3">
         <div id="feed-list">
             {#include fragments/feed-list.html rows=rows nextOffset=nextOffset hasMore=hasMore pageSize=pageSize /}