Improve spinner on Mobile UI (#2847)

LycheeOrg · Jan 1, 2025 · aaff115 · aaff115
1 parent 9291145
commit aaff115
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/resources/js/components/gallery/LoadingProgress.vue b/resources/js/components/gallery/LoadingProgress.vue
@@ -0,0 +1,15 @@
+<template>
+	<ProgressBar v-if="isLoadingDesktop" mode="indeterminate" class="rounded-none absolute w-full" :pt:value:class="'rounded-none'" />
+	<ProgressSpinner v-if="isLoadingMobile" class="left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 absolute z-10" />
+</template>
+<script setup lang="ts">
+import { computed, type Ref } from "vue";
+import { isTouchDevice } from "@/utils/keybindings-utils";
+import ProgressBar from "primevue/progressbar";
+import ProgressSpinner from "primevue/progressspinner";
+
+const loading = defineModel("loading") as Ref<boolean>;
+
+const isLoadingMobile = computed(() => isTouchDevice() && loading.value);
+const isLoadingDesktop = computed(() => !isTouchDevice() && loading.value);
+</script>
diff --git a/resources/js/views/FixTree.vue b/resources/js/views/FixTree.vue
@@ -1,5 +1,5 @@
 <template>
-	<ProgressBar v-if="albums === undefined" mode="indeterminate" class="rounded-none absolute w-full" :pt:value:class="'rounded-none'" />
+	<LoadingProgress v-model:loading="isLoading" />
 	<Toolbar class="w-full border-0 h-14">
 		<template #start>
 			<OpenLeftMenu />
@@ -87,7 +87,6 @@
 import { ref, onMounted } from "vue";
 import MaintenanceService from "@/services/maintenance-service";
 import Toolbar from "primevue/toolbar";
-import ProgressBar from "primevue/progressbar";
 import Button from "primevue/button";
 import ScrollTop from "primevue/scrolltop";
 import VirtualScroller from "primevue/virtualscroller";
@@ -100,12 +99,14 @@ import Left from "@/components/maintenance/mini/Left.vue";
 import Right from "@/components/maintenance/mini/Right.vue";
 import LeftWarn from "@/components/maintenance/mini/LeftWarn.vue";
 import RightWarn from "@/components/maintenance/mini/RightWarn.vue";
+import LoadingProgress from "@/components/gallery/LoadingProgress.vue";
 
 const albums = ref<AugmentedAlbum[] | undefined>(undefined);
 const originalAlbums = ref<App.Http.Resources.Diagnostics.AlbumTree[] | undefined>(undefined);
 const hoverId = ref<string | undefined>(undefined);
 const toast = useToast();
 const albumIds = ref<string[]>([]);
+const isLoading = ref(true);
 
 const { isValidated, validate, prepareAlbums, check, incrementLft, incrementRgt, decrementLft, decrementRgt } = useTreeOperations(
 	originalAlbums,
@@ -115,9 +116,11 @@ const { isValidated, validate, prepareAlbums, check, incrementLft, incrementRgt,
 
 function fetch() {
 	albums.value = undefined;
+	isLoading.value = true;
 	MaintenanceService.fullTreeGet().then((data) => {
 		originalAlbums.value = data.data;
 		albumIds.value = originalAlbums.value.map((a) => a.id);
+		isLoading.value = false;
 		prepareAlbums();
 	});
 }

diff --git a/resources/js/views/gallery-panels/Album.vue b/resources/js/views/gallery-panels/Album.vue
@@ -1,5 +1,5 @@
 <template>
-	<ProgressBar v-if="isLoading" mode="indeterminate" class="rounded-none absolute w-full" :pt:value:class="'rounded-none'" />
+	<LoadingProgress v-model:loading="isLoading" />
 	<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" />
@@ -216,7 +216,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";
+import LoadingProgress from "@/components/gallery/LoadingProgress.vue";
 
 const route = useRoute();
 const router = useRouter();

diff --git a/resources/js/views/gallery-panels/Albums.vue b/resources/js/views/gallery-panels/Albums.vue
@@ -1,5 +1,5 @@
 <template>
-	<ProgressBar v-if="isLoading" mode="indeterminate" class="rounded-none absolute w-full z-10" :pt:value:class="'rounded-none'" />
+	<LoadingProgress v-model:loading="isLoading" />
 	<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" />
@@ -160,7 +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";
+import LoadingProgress from "@/components/gallery/LoadingProgress.vue";
 
 const auth = useAuthStore();
 const router = useRouter();