Add sync loading indicators: spinner in feed when fetching releases, syncing indicator on artist row when toggling types

src/main/java/io/discdrop/resource/ArtistResource.java

@@ -68,14 +68,14 @@ public class ArtistResource {
         }
         artistService.follow(dto);
         CompletableFuture.runAsync(() -> syncService.syncArtist(mbid));
-        return feedFragment(0, true);
+        return feedFragment(0, true, true);
     }
 
     @DELETE
     @Path("/{mbid}")
     public TemplateInstance unfollow(@PathParam("mbid") String mbid) {
         artistService.unfollow(mbid);
-        return feedFragment(0, false);
+        return feedFragment(0, false, false);
     }
 
     @GET
@@ -90,7 +90,8 @@ public class ArtistResource {
         FollowedArtist artist = artistService.findArtist(mbid);
         List<ArtistTypeSetting> settings = artist != null ? artistService.settingsFor(artist) : List.of();
         return fragments_artist_row.data("artist", artist)
-                .data("settings", settings);
+                .data("settings", settings)
+                .data("syncing", syncService.isSyncing(mbid));
     }
 
     @POST
@@ -103,10 +104,11 @@ public class ArtistResource {
         FollowedArtist artist = artistService.findArtist(mbid);
         List<ArtistTypeSetting> settings = artist != null ? artistService.settingsFor(artist) : List.of();
         return fragments_artist_row.data("artist", artist)
-                .data("settings", settings);
+                .data("settings", settings)
+                .data("syncing", true);
     }
 
-    private TemplateInstance feedFragment(int offset, boolean autoRefresh) {
+    private TemplateInstance feedFragment(int offset, boolean autoRefresh, boolean syncing) {
         if (offset < 0) {
             offset = 0;
         }
@@ -117,6 +119,7 @@ public class ArtistResource {
                 .data("nextOffset", nextOffset)
                 .data("hasMore", hasMore)
                 .data("pageSize", feedService.pageSize())
-                .data("autoRefresh", autoRefresh);
+                .data("autoRefresh", autoRefresh)
+                .data("syncing", syncing);
     }
 }

src/main/java/io/discdrop/resource/PageResource.java

@@ -3,6 +3,7 @@ package io.discdrop.resource;
 import io.discdrop.persistence.FollowedArtist;
 import io.discdrop.persistence.ReleaseGroupEntity;
 import io.discdrop.service.FeedService;
+import io.discdrop.service.SyncService;
 import io.quarkus.qute.Location;
 import io.quarkus.qute.Template;
 import io.quarkus.qute.TemplateInstance;
@@ -20,6 +21,9 @@ public class PageResource {
     @Inject
     FeedService feedService;
 
+    @Inject
+    SyncService syncService;
+
     @Inject
     Template index;
 
@@ -41,7 +45,8 @@ public class PageResource {
                 .data("nextOffset", nextOffset)
                 .data("hasMore", hasMore)
                 .data("pageSize", feedService.pageSize())
-                .data("autoRefresh", false);
+                .data("autoRefresh", false)
+                .data("syncing", syncService.isAnySyncing());
     }
 
     @GET
@@ -54,6 +59,7 @@ public class PageResource {
                 .data("hasMore", hasMore)
                 .data("pageSize", feedService.pageSize())
                 .data("autoRefresh", false)
+                .data("syncing", syncService.isAnySyncing())
                 .data("followedCount", FollowedArtist.count())
                 .data("feedCount", ReleaseGroupEntity.count());
     }

src/main/java/io/discdrop/service/SyncService.java

@@ -11,6 +11,7 @@ import jakarta.enterprise.event.Observes;
 import jakarta.inject.Inject;
 
 import java.util.Set;
+import java.util.concurrent.ConcurrentHashMap;
 import java.util.concurrent.Executors;
 import java.util.concurrent.ScheduledExecutorService;
 import java.util.concurrent.ScheduledFuture;
@@ -31,6 +32,8 @@ public class SyncService {
     @Inject
     SettingsService settingsService;
 
+    private final Set<String> syncing = ConcurrentHashMap.newKeySet();
+
     private final ScheduledExecutorService executor =
             Executors.newSingleThreadScheduledExecutor(r -> {
                 Thread t = new Thread(r, "discdrop-sync");
@@ -73,7 +76,17 @@ public class SyncService {
         }
     }
 
+    public boolean isSyncing(String mbid) {
+        return syncing.contains(mbid);
+    }
+
+    public boolean isAnySyncing() {
+        return !syncing.isEmpty();
+    }
+
     public void syncArtist(String mbid) {
+        syncing.add(mbid);
+        try {
             Set<String> enabledTypes = artistService.enabledTypes(mbid);
             String typeFilter = enabledTypes.isEmpty() ? null : String.join("|", enabledTypes);
 
@@ -90,6 +103,9 @@ public class SyncService {
                 more = page.releaseGroups.size() == limit && offset < page.count;
             }
             repo.markSynced(mbid);
+        } finally {
+            syncing.remove(mbid);
+        }
     }
 
     public void resyncArtist(String mbid) {

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 /}