Add Album loading progress spinner (#2751)

resources/js/composables/album/albumRefresher.ts

@@ -4,6 +4,7 @@ import { computed, Ref, ref } from "vue";
 
 export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLoginOpen: Ref<boolean>, nsfw_consented: Ref<string[]>) {
 	const isPasswordProtected = ref(false);
+	const isLoading = ref(false);
 	const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
 	const modelAlbum = ref<App.Http.Resources.Models.AlbumResource | undefined>(undefined);
 	const tagAlbum = ref<App.Http.Resources.Models.TagAlbumResource | undefined>(undefined);
@@ -23,6 +24,8 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 	}
 
 	function loadAlbum(): Promise<void> {
+		isLoading.value = true;
+
 		return AlbumService.get(albumId.value)
 			.then((data) => {
 				isPasswordProtected.value = false;
@@ -50,6 +53,9 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 				} else {
 					console.error(error);
 				}
+			})
+			.finally(() => {
+				isLoading.value = false;
 			});
 	}
 
@@ -60,6 +66,7 @@ export function useAlbumRefresher(albumId: Ref<string>, auth: AuthStore, isLogin
 	return {
 		isAlbumConsented,
 		isPasswordProtected,
+		isLoading,
 		albumId,
 		user,
 		modelAlbum,

resources/js/composables/album/albumsRefresher.ts

@@ -8,15 +8,18 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 	const { spliter } = useSplitter();
 	const user = ref<App.Http.Resources.Models.UserResource | undefined>(undefined);
 	const isKeybindingsHelpOpen = ref(false);
+	const isLoading = ref(false);
 	const smartAlbums = ref<App.Http.Resources.Models.ThumbAlbumResource[]>([]);
 	const albums = ref<App.Http.Resources.Models.ThumbAlbumResource[]>([]);
 	const sharedAlbums = ref<SplitData<App.Http.Resources.Models.ThumbAlbumResource>[]>([]);
 	const rootConfig = ref<App.Http.Resources.GalleryConfigs.RootConfig | undefined>(undefined);
 	const rootRights = ref<App.Http.Resources.Rights.RootAlbumRightsResource | undefined>(undefined);
 	const selectableAlbums = computed(() => albums.value.concat(sharedAlbums.value.map((album) => album.data).flat()));
 
-	function refresh(): Promise<void> {
-		auth.getUser().then((data) => {
+	function refresh(): Promise<[void, void]> {
+		isLoading.value = true;
+
+		const getUser = auth.getUser().then((data) => {
 			user.value = data;
 
 			const body_width = document.body.scrollWidth;
@@ -26,7 +29,7 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 			}
 		});
 
-		return AlbumService.getAll()
+		const getAlbums = AlbumService.getAll()
 			.then((data) => {
 				smartAlbums.value = (data.data.smart_albums as App.Http.Resources.Models.ThumbAlbumResource[]) ?? [];
 				albums.value = data.data.albums as App.Http.Resources.Models.ThumbAlbumResource[];
@@ -54,11 +57,16 @@ export function useAlbumsRefresher(auth: AuthStore, lycheeStore: LycheeStateStor
 					console.error(error);
 				}
 			});
+
+		return Promise.all([getUser, getAlbums]).finally(() => {
+			isLoading.value = false;
+		});
 	}
 
 	return {
 		user,
 		isKeybindingsHelpOpen,
+		isLoading,
 		smartAlbums,
 		albums,
 		sharedAlbums,

resources/js/layouts/PhotoLayout.ts

@@ -62,8 +62,8 @@ export function useGetLayoutConfig() {
 	const layoutConfig = ref(null) as Ref<null | App.Http.Resources.GalleryConfigs.PhotoLayoutConfig>;
 	const layout = ref("square") as Ref<App.Enum.PhotoLayoutType>;
 
-	function loadLayoutConfig() {
-		AlbumService.getLayout().then((data) => {
+	function loadLayoutConfig(): Promise<void> {
+		return AlbumService.getLayout().then((data) => {
 			layoutConfig.value = data.data;
 		});
 	}

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

@@ -1,4 +1,5 @@
 <template>
+	<ProgressBar v-if="isLoading" mode="indeterminate" class="rounded-none absolute w-full" :pt:value:class="'rounded-none'" />
 	<UploadPanel v-if="album?.rights.can_upload" @refresh="refresh" key="upload_modal" />
 	<LoginModal v-if="user?.id === null" @logged-in="refresh" />
 	<WebauthnModal v-if="user?.id === null" @logged-in="refresh" />
@@ -173,7 +174,7 @@
 </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 AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import PhotoThumbPanel from "@/components/gallery/PhotoThumbPanel.vue";
@@ -214,6 +215,7 @@ import AlbumCreateDialog from "@/components/forms/album/AlbumCreateDialog.vue";
 import { useScrollable } from "@/composables/album/scrollable";
 import { useGetLayoutConfig } from "@/layouts/PhotoLayout";
 import WebauthnModal from "@/components/modals/WebauthnModal.vue";
+import ProgressBar from "primevue/progressbar";
 
 const route = useRoute();
 const router = useRouter();
@@ -248,7 +250,7 @@ function toggleSlideShow() {
 const { layoutConfig, loadLayoutConfig } = useGetLayoutConfig();
 
 // Set up Album ID reference. This one is updated at each page change.
-const { isAlbumConsented, isPasswordProtected, user, modelAlbum, album, rights, photos, config, refresh } = useAlbumRefresher(
+const { isAlbumConsented, isPasswordProtected, isLoading, user, modelAlbum, album, rights, photos, config, refresh } = useAlbumRefresher(
 	albumid,
 	auth,
 	is_login_open,
@@ -376,9 +378,10 @@ function consent() {
 	isAlbumConsented.value = true;
 }
 
-loadLayoutConfig();
-
-refresh().then(setScroll);
+onMounted(async () => {
+	await Promise.all([loadLayoutConfig(), refresh()]);
+	setScroll();
+});
 
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
 onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());
@@ -406,6 +409,7 @@ watch(
 	() => route.params.albumid,
 	(newId, _oldId) => {
 		unselect();
+
 		albumid.value = newId as string;
 		window.addEventListener("paste", onPaste);
 		window.addEventListener("dragover", dragEnd);

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

@@ -1,4 +1,5 @@
 <template>
+	<ProgressBar v-if="isLoading" mode="indeterminate" class="rounded-none absolute w-full z-10" :pt:value:class="'rounded-none'" />
 	<UploadPanel v-if="rootRights?.can_upload" @refresh="refresh" key="upload_modal" />
 	<KeybindingsHelp v-model:visible="isKeybindingsHelpOpen" v-if="user?.id" />
 	<AlbumCreateDialog v-if="rootRights?.can_upload" :parent-id="null" key="create_album_modal" />
@@ -128,7 +129,7 @@
 <script setup lang="ts">
 import AlbumThumbPanel from "@/components/gallery/AlbumThumbPanel.vue";
 import { useAuthStore } from "@/stores/Auth";
-import { computed, ref } from "vue";
+import { computed, ref, onMounted } from "vue";
 import AlbumsHeader from "@/components/headers/AlbumsHeader.vue";
 import { useLycheeStateStore } from "@/stores/LycheeState";
 import { storeToRefs } from "pinia";
@@ -159,6 +160,7 @@ import { useScrollable } from "@/composables/album/scrollable";
 import { EmptyPhotoCallbacks } from "@/utils/Helpers";
 import WebauthnModal from "@/components/modals/WebauthnModal.vue";
 import LoginModal from "@/components/modals/LoginModal.vue";
+import ProgressBar from "primevue/progressbar";
 
 const auth = useAuthStore();
 const router = useRouter();
@@ -175,11 +177,8 @@ const { are_nsfw_visible, title } = storeToRefs(lycheeStore);
 
 const photos = ref([]); // unused.
 
-const { user, isKeybindingsHelpOpen, smartAlbums, albums, sharedAlbums, rootConfig, rootRights, selectableAlbums, refresh } = useAlbumsRefresher(
-	auth,
-	lycheeStore,
-	is_login_open,
-);
+const { user, isLoading, isKeybindingsHelpOpen, smartAlbums, albums, sharedAlbums, rootConfig, rootRights, selectableAlbums, refresh } =
+	useAlbumsRefresher(auth, lycheeStore, is_login_open);
 
 const { selectedAlbum, selectedAlbumsIdx, selectedAlbums, selectedAlbumsIds, albumClick, selectEverything, unselect, hasSelection } = useSelection(
 	photos,
@@ -219,7 +218,10 @@ const albumPanelConfig = computed<AlbumThumbConfig>(() => ({
 	album_decoration_orientation: lycheeStore.album_decoration_orientation,
 }));
 
-refresh().then(setScroll);
+onMounted(async () => {
+	await refresh();
+	setScroll();
+});
 
 onKeyStroke("h", () => !shouldIgnoreKeystroke() && (are_nsfw_visible.value = !are_nsfw_visible.value));
 onKeyStroke("f", () => !shouldIgnoreKeystroke() && togglableStore.toggleFullScreen());