ui: add error state for catalog api failures

api/anime/handler.go

@@ -182,10 +182,9 @@ func (h *Handler) HandleAPICatalog(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if jikan.IsRetryableError(err) {
-		if err := templates.CatalogPlaceholderItems(25).Render(r.Context(), w); err != nil {
+		if err := templates.CatalogError("Unable to load anime catalog").Render(r.Context(), w); err != nil {
 			log.Printf("render error: %v", err)
 			http.Error(w, "Internal Server Error", http.StatusInternalServerError)
-			return
 		}
 		return
 	}

web/templates/catalog.templ

@@ -27,3 +27,29 @@ templ CatalogPlaceholderItems(count int) {
 		</div>
 	}
 }
+
+templ CatalogError(message string) {
+	<div class="col-span-full py-8 text-center" id="catalog-content">
+		<div class="mb-3 text-base text-(--text)">
+			if message != "" {
+				{ message }
+			} else {
+				Unable to load data
+			}
+		</div>
+		<div class="text-sm text-(--text-muted)">
+			The anime catalog is temporarily unavailable. Please wait a moment and refresh the page.
+		</div>
+		<button
+			hx-get="/api/catalog?page=1"
+			hx-target="#catalog-content"
+			hx-swap="outerHTML"
+			class="mt-4 inline-flex cursor-pointer items-center gap-2 rounded bg-(--surface-search) px-4 py-2 text-sm text-(--text) hover:bg-(--panel-soft)"
+		>
+			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+				<path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
+			</svg>
+			Try again
+		</button>
+	</div>
+}