fix(playlist): popup loading delay

mbaraa · Jun 3, 2024 · b219a58 · b219a58
1 parent 7f82057
commit b219a58
Showing 1 changed file with 7 additions and 8 deletions.
diff --git a/app/views/components/playlist/popup.templ b/app/views/components/playlist/popup.templ
@@ -9,7 +9,7 @@ import (
 )
 
 templ PlaylistsPopup(index int, songId string) {
-	@menus.Popup(fmt.Sprint(index), "Add to playlist", popupButton(songId), playlistSelector(songId))
+	@menus.Popup(fmt.Sprint(index), "Add to playlist", popupButton(), playlistSelector(songId))
 }
 
 templ playlistSelector(songId string) {
@@ -19,11 +19,14 @@ templ playlistSelector(songId string) {
 			"min-w-[350px]", "bg-accent-trans-30", "backdrop-blur-xl", "p-3", "text-secondary",
 			"rounded-b-[10px]", "rounded-l-[10px]",
 		}
+		hx-get={ "/api/playlist/all?song-id=" + songId }
+		hx-swap="outerHTML"
+		hx-trigger="intersect"
 	>
-		<div id="playlist-loading" class={ "w-full", "flex", "justify-center" }>
+		<div id="playlist-loading" class={ "w-full", "flex", "flex-col", "items-center", "justify-center" }>
 			<div class={ "loader", "!h-20", "!w-20" }></div>
+			<span class={ "text-secondary", "text-xl" }>Loading playlists...</span>
 		</div>
-		<span class={ "text-secondary", "text-xl" }>Loading playlists...</span>
 	</div>
 }
 
@@ -84,13 +87,9 @@ templ PlaylistsSelector(songId string, playlists []entities.Playlist, songsInPla
 	</div>
 }
 
-templ popupButton(songId string) {
+templ popupButton() {
 	<div
 		class={ "flex", "gap-x-2", "items-center", "p-2", "w-full" }
-		hx-get={ "/api/playlist/all?song-id=" + songId }
-		hx-swap="outerHTML"
-		hx-trigger="click"
-		hx-target={ "#playlists-" + songId }
 	>
 		@icons.AddToPlaytlist()
 		<span>Save to a playlist</span>