Add minial animations to Ui

albumCover.go

@@ -107,6 +107,10 @@ func loadAlbumCover(albumId string) {
 
 // Tries to load the album cover
 func (a *App) GetAlbumCover(albumId string) ([]byte, error) {
+	if albumId == "" {
+		return nil, nil
+	}
+
 	cacheMutex.Lock()
 	coverInfo, ok := albumCoverCacheInfo[albumId]
 	cacheMutex.Unlock()

frontend/src/routes/Home.tsx

@@ -1,19 +1,33 @@
-import { For, createMemo, createResource, createSignal, onMount } from "solid-js";
+import { For, Show, createEffect, createMemo, createResource, createSignal, onCleanup, onMount } from "solid-js";
-import { GetAlbumCover, GetRandomAlbums } from "../../wailsjs/go/main/App";
+import { GetAlbumCover, GetRandomAlbums, LoadRandomAlbums } from "../../wailsjs/go/main/App";
 import { main } from "../../wailsjs/go/models";
 
 export function Home() {
     const [hidden, setHidden] = createSignal(true);
-    const [albums] = createResource(GetRandomAlbums);
+    const [albums, {mutate, refetch}] = createResource<Array<main.Album | null>>(GetRandomAlbums);
 
     onMount(() => {
         // Fade in the UI
         setTimeout(() => setHidden(false), 150);
     });
 
+    const reload = () => {
+        LoadRandomAlbums();
+        mutate((new Array(20)).map(() => null));
+        setTimeout(refetch, 100);
+    };
+
     return (
         <div class={`min-h-screen ${hidden() ? "opacity-0" : "opacity-100"} transition-opacity`}>
-            <h1 class="font-black text-2xl pt-6 pb-4 pl-2">Random albums</h1>
+            <h1 class="font-black text-2xl pt-6 pb-4 pl-2">
+                Random albums
+                <button
+                    class="text-xs font-normal mx-1 p-1 rounded underline hover:bg-zinc-900"
+                    onClick={reload}
+                >
+                    Reload
+                </button>
+            </h1>
             <div class="pb-4 overflow-scroll whitespace-nowrap">
                 <For each={albums()}>
                     {(album) => <Album album={album} />}
@@ -23,8 +37,17 @@ export function Home() {
     );
 }
 
-function Album(props: { album: main.Album }) {
+function Album(props: { album: main.Album | null }) {
-    const [coverBytes] = createResource(async() => await GetAlbumCover(props.album.id));
+    const [coverBytes, {mutate, refetch}] = createResource<Array<number> | null>(async() => GetAlbumCover(props.album?.id ?? ""));
+
+    createEffect(() => {
+        if (!props.album) {
+            mutate(null);
+            return;
+        }
+
+        refetch();
+    });
 
     const base64Image = createMemo(() => {
         if (coverBytes.state !== "ready") return "";
@@ -34,20 +57,27 @@ function Album(props: { album: main.Album }) {
         return `data:;base64,${bytes}`;
     });
 
+    const isNull = createMemo(() => !props.album);
+    const opacity = createMemo(() => `${isNull() ? "opacity-0" : "opacity-100"} transition-opacity`);
+
     return (
         <div class="inline-block mx-2 p-1 w-32 rounded bg-zinc-900">
-            <img
+            <Show when={isNull()}>
-                class={`inline-block rounded w-30 h-30 min-w-30 min-h-30 transition-opacity ${coverBytes.state === "ready" ? "opacity-100" : "opacity-0"}`}
+                <div class="w-30 h-30" />
-                src={base64Image()}
+            </Show>
-                alt=""
+            <Show when={!isNull()}>
-            />
+                <img
+                    class={`inline-block rounded w-30 h-30 transition-opacity ${coverBytes.state === "ready" ? "opacity-100" : "opacity-0"}`}
+                    src={base64Image()}
+                    alt=""
+                />
+            </Show>
 
-            <br />
+            <div class={`text-sm overflow-hidden overflow-ellipsis pt-1 ${opacity()}`}>
-            <div class="text-sm overflow-hidden overflow-ellipsis pt-1">
+                {props.album?.name ?? "..."}
-                {props.album.name}
             </div>
-            <div class="text-xs overflow-hidden overflow-ellipsis opacity-50">
+            <div class={`text-xs overflow-hidden overflow-ellipsis ${opacity()}`}>
-                {props.album.albumArtist}
+                {props.album?.albumArtist ?? "..."}
             </div>
 
         </div>

frontend/wailsjs/go/main/App.d.ts

@@ -8,4 +8,6 @@ export function GetRandomAlbums():Promise<Array<main.Album>>;
 
 export function Greet(arg1:string):Promise<string>;
 
+export function LoadRandomAlbums():Promise<void>;
+
 export function Login(arg1:string,arg2:string,arg3:string):Promise<boolean>;

frontend/wailsjs/go/main/App.js

@@ -14,6 +14,10 @@ export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }
 
+export function LoadRandomAlbums() {
+  return window['go']['main']['App']['LoadRandomAlbums']();
+}
+
 export function Login(arg1, arg2, arg3) {
   return window['go']['main']['App']['Login'](arg1, arg2, arg3);
 }

session.go

@@ -5,6 +5,7 @@ import (
 	"fmt"
 	"log"
 	"sync"
+	"time"
 
 	"github.com/go-resty/resty/v2"
 )
@@ -55,7 +56,6 @@ func (a *App) Login(server, username, password string) (bool, error) {
 		// Set global session
 		LoggedUser = successData
 		// Begin to load the list of albums on the background
-		randomAlbumWaitGroup.Add(1)
 		go loadAlbums(server)
 
 		return true, nil
@@ -68,6 +68,11 @@ func (a *App) Login(server, username, password string) (bool, error) {
 	}
 }
 
+// Triggers a reload of random albums
+func (a *App) LoadRandomAlbums() {
+	go loadAlbums(serverUrl)
+}
+
 // Waits for the random albums to be loaded, and returns them.
 // This function assumes that the random albums are being loaded in the background.
 func (a *App) GetRandomAlbums() ([]Album, error) {
@@ -80,9 +85,12 @@ func (a *App) GetRandomAlbums() ([]Album, error) {
 
 // Loads a list of random albums from the server.
 func loadAlbums(serverUrl string) {
+	randomAlbumWaitGroup.Add(1)
 	defer randomAlbumWaitGroup.Done()
+
 	log.Print("begin loadAlbums")
-	client := resty.New()
+
+	time.Sleep(5 * time.Second)
 
 	var errorData AuthError
 	response, err := client.R().