Add Album loading progress spinner

resources/js/composables/album/albumRefresher.ts

@@ -15,42 +15,41 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 	const config = ref<App.Http.Resources.GalleryConfigs.AlbumConfig | undefined>(undefined);
 	const rights = computed(() => album.value?.rights ?? undefined);
 
-	function loadUser(): Promise<void> {
-		return auth.getUser().then((data: App.Http.Resources.Models.UserResource) => {
-			user.value = data;
-			loadAlbum();
-		});
+	async function loadUser(): Promise<void> {
+		const userResponse = await auth.getUser();
+		user.value = userResponse;
+		await loadAlbum();
 	}
 
-	function loadAlbum(): Promise<void> {
-		return AlbumService.get(albumId.value)
-			.then((data) => {
-				isPasswordProtected.value = false;
-				config.value = data.data.config;
-				modelAlbum.value = undefined;
-				tagAlbum.value = undefined;
-				smartAlbum.value = undefined;
-				if (data.data.config.is_model_album) {
-					modelAlbum.value = data.data.resource as App.Http.Resources.Models.AlbumResource;
-				} else if (data.data.config.is_base_album) {
-					tagAlbum.value = data.data.resource as App.Http.Resources.Models.TagAlbumResource;
-				} else {
-					smartAlbum.value = data.data.resource as App.Http.Resources.Models.SmartAlbumResource;
-				}
-				photos.value = album.value?.photos ?? [];
-				isAlbumConsented.value = nsfw_consented.value.find((e) => e === albumId.value) !== undefined;
-			})
-			.catch((error) => {
-				if (error.response.status === 401 && error.response.data.message === "Password required") {
-					isPasswordProtected.value = true;
-				} else if (error.response.status === 403 && error.response.data.message === "Password required") {
-					isPasswordProtected.value = true;
-				} else if (error.response.status === 401) {
-					isLoginOpen.value = true;
-				} else {
-					console.error(error);
-				}
-			});
+	async function loadAlbum(): Promise<void> {
+		try {
+			const albumResponse = await AlbumService.get(albumId.value);
+
+			isPasswordProtected.value = false;
+			config.value = albumResponse.data.config;
+			modelAlbum.value = undefined;
+			tagAlbum.value = undefined;
+			smartAlbum.value = undefined;
+			if (albumResponse.data.config.is_model_album) {
+				modelAlbum.value = albumResponse.data.resource as App.Http.Resources.Models.AlbumResource;
+			} else if (albumResponse.data.config.is_base_album) {
+				tagAlbum.value = albumResponse.data.resource as App.Http.Resources.Models.TagAlbumResource;
+			} else {
+				smartAlbum.value = albumResponse.data.resource as App.Http.Resources.Models.SmartAlbumResource;
+			}
+			photos.value = album.value?.photos ?? [];
+			isAlbumConsented.value = nsfw_consented.value.find((e) => e === albumId.value) !== undefined;
+		} catch (error) {
+			if (error.response.status === 401 && error.response.data.message === "Password required") {
+				isPasswordProtected.value = true;
+			} else if (error.response.status === 403 && error.response.data.message === "Password required") {
+				isPasswordProtected.value = true;
+			} else if (error.response.status === 401) {
+				isLoginOpen.value = true;
+			} else {
+				console.error(error);
+			}
+		}
 	}
 
 	function refresh(): Promise<void> {

resources/js/services/album-service.ts

@@ -73,9 +73,9 @@ const AlbumService = {
 		return requester.get(`${Constants.getApiUrl()}Albums`, { data: {}, id: "albums" });
 	},
 
-	get(album_id: string): Promise<AxiosResponse<App.Http.Resources.Models.AbstractAlbumResource>> {
+	async get(album_id: string): Promise<AxiosResponse<App.Http.Resources.Models.AbstractAlbumResource>> {
 		const requester = axios as unknown as AxiosCacheInstance;
-		return requester.get(`${Constants.getApiUrl()}Album`, { params: { album_id: album_id }, data: {}, id: "album_" + album_id });
+		return await requester.get(`${Constants.getApiUrl()}Album`, { params: { album_id: album_id }, data: {}, id: "album_" + album_id });
 	},
 
 	unlock(album_id: string, password: string): Promise<AxiosResponse> {

resources/js/views/gallery-panels/Album.vue

@@ -1,4 +1,5 @@
 <template>
+	<ProgressSpinner v-if="loading" class="w-full"></ProgressSpinner>
 	<UploadPanel v-if="album?.rights.can_upload" @refresh="refresh" key="upload_modal" />
 	<AlbumCreateDialog v-if="album?.rights.can_upload && config?.is_model_album" v-model:parent-id="album.id" key="create_album_modal" />
 	<div class="h-svh overflow-y-hidden">
@@ -172,8 +173,9 @@
 </template>
 <script setup lang="ts">
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref, watch } from "vue";
+import { computed, ref, watch, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import ProgressSpinner from "primevue/progressspinner";
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import PhotoThumbPanel from "@/components/gallery/PhotoThumbPanel.vue";
 import ShareAlbum from "@/components/modals/ShareAlbum.vue";
@@ -276,6 +278,7 @@ const {
 } = useGalleryModals(togglableStore);
 
 const areStatisticsOpen = ref(false);
+const loading = ref(false);
 
 function toggleStatistics() {
 	if (is_se_enabled) {
@@ -374,9 +377,15 @@ function consent() {
 	isAlbumConsented.value = true;
 }
 
-loadLayoutConfig();
+onMounted(async () => {
+	loading.value = true;
 
-refresh().then(setScroll);
+	loadLayoutConfig();
+	await refresh();
+	setScroll();
+
+	loading.value = false;
+})
 
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
 onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
@@ -408,6 +417,7 @@ watch(
 		window.addEventListener("paste", onPaste);
 		window.addEventListener("dragover", dragEnd);
 		window.addEventListener("drop", dropUpload);
+		console.log("Album view changed albumid to", newId);
 		refresh().then(setScroll);
 	},
 );