packages/client/src/components/drive.vue

@@ -36,7 +36,12 @@
 		@contextmenu.stop="onContextmenu"
 	>
 		<div ref="contents" class="contents">
-			<MkPagination ref="foldersPaginationElem" :pagination="foldersPagination" class="folders">
+			<MkPagination
+				ref="foldersPaginationElem"
+				:pagination="foldersPagination"
+				class="folders"
+				@loaded="foldersLoading = false"
+			>
 				<template #empty>
 					<!--
 						Don't display anything here if there are no folders,
@@ -66,7 +71,12 @@
 					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
 				</template>
 			</MkPagination>
-			<MkPagination ref="filesPaginationElem" :pagination="filesPagination" class="files">
+			<MkPagination
+				ref="filesPaginationElem"
+				:pagination="filesPagination"
+				class="files"
+				@loaded="filesLoading = false"
+			>
 				<template #empty>
 					<!--
 						Don't display anything here if there are no files,
@@ -92,7 +102,7 @@
 					<div v-for="(n, i) in 16" :key="i" class="padding"></div>
 				</template>
 			</MkPagination>
-			<div v-if="foldersPaginationElem?.items.length === 0 && filesPaginationElem?.items.length === 0" class="empty">
+			<div v-if="empty" class="empty">
 				<p v-if="folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong></p>
 				<p v-else>{{ i18n.ts.emptyFolder }}</p>
 			</div>
@@ -138,6 +148,11 @@ const emit = defineEmits<{
 let foldersPaginationElem = $ref<InstanceType<typeof MkPagination>>();
 let filesPaginationElem = $ref<InstanceType<typeof MkPagination>>();
 
+let foldersLoading = $ref<boolean>(true);
+let filesLoading = $ref<boolean>(true);
+const empty = $computed(() => !foldersLoading && !filesLoading
+	&& foldersPaginationElem?.items.length === 0 && filesPaginationElem?.items.length === 0);
+
 let fileInput = $ref<HTMLInputElement>();
 
 const uploadings = uploads;
@@ -415,6 +430,10 @@ function chooseFolder(folderToChoose: foundkey.entities.DriveFolder) {
 }
 
 function move(target?: string | foundkey.entities.DriveFolder) {
+	// reset loading state
+	foldersLoading = true;
+	filesLoading = true;
+
 	if (!target) {
 		goRoot();
 		return;

packages/client/src/components/ui/pagination.vue

@@ -70,6 +70,8 @@ const props = withDefaults(defineProps<{
 
 const emit = defineEmits<{
 	(ev: 'queue', count: number): void;
+	(ev: 'loaded'): void;
+	(ev: 'error'): void;
 }>();
 
 type Item = { id: string; [another: string]: unknown; };
@@ -105,9 +107,11 @@ const init = async (): Promise<void> => {
 		offset.value = res.length;
 		error.value = false;
 		fetching.value = false;
+		emit('loaded');
 	}, () => {
 		error.value = true;
 		fetching.value = false;
+		emit('error');
 	});
 };