pkp/pkp-lib#10663 Hide submissions on dashboard when loading different view/page/...

Author: jardakotesovec

src/components/Modal/Dialog.vue

@@ -66,7 +66,6 @@
 								class="flex items-center gap-x-4"
 								:class="icon ? 'p-10 ps-24' : 'p-12'"
 							>
-								<Spinner v-if="isLoading" />
 								<PkpButton
 									v-for="action in actions"
 									:key="action.label"
@@ -81,6 +80,7 @@
 								>
 									{{ action.label }}
 								</PkpButton>
+								<Spinner v-if="isLoading" />
 							</div>
 						</DialogPanel>
 					</TransitionChild>

src/composables/useFetch.js

@@ -39,6 +39,10 @@ export function getCSRFToken() {
  * @returns {Ref<boolean>} return.isLoading - A ref object indicating whether the fetch operation is currently in progress.
  * @returns {Function} return.fetch - The function to call to initiate the fetch operation. This function is async and handles the actual fetching logic.
  *
+ *  * The `fetch` function accepts the following optional parameter:
+ * @param {Object} [fetchOptions={}] - Options to customize the fetch operation.
+ * @param {boolean} [fetchOptions.clearData=false] - If set to `true`, processes and cleans the fetched data before storing it in `data`. Defaults to `false`.
+ 
  */
 export function useFetch(url, options = {}) {
 	/**
@@ -72,7 +76,7 @@ export function useFetch(url, options = {}) {
 	const screenName = modalLevel?.value ? `modal_${modalLevel.value}` : 'base';
 	const progressStore = useProgressStore();
 
-	async function _fetch() {
+	async function _fetch({clearData} = {clearData: false}) {
 		if (lastRequestController) {
 			// abort in-flight request
 			lastRequestController.abort();
@@ -109,6 +113,9 @@ export function useFetch(url, options = {}) {
 		}
 
 		isSuccess.value = null;
+		if (clearData) {
+			data.value = null;
+		}
 		try {
 			const result = await ofetchInstance(unref(url), opts);
 			data.value = result;
@@ -144,7 +151,7 @@ export function useFetch(url, options = {}) {
 
 	let fetch = _fetch;
 	if (options.debouncedMs) {
-		fetch = useDebounceFn(_fetch);
+		fetch = useDebounceFn(_fetch, options.debouncedMs);
 	}
 	return {
 		data,

src/pages/dashboard/components/DashboardTable/DashboardTable.vue

@@ -20,7 +20,13 @@
 				{{ column.header }}
 			</TableColumn>
 		</TableHeader>
-		<TableBody>
+		<TableBody
+			:empty-text="
+				dashboardStore.isSubmissionsLoading
+					? t('common.loading')
+					: t('grid.noItems')
+			"
+		>
 			<TableRow v-for="item in items" :key="item.id">
 				<CellBulkDelete
 					v-if="dashboardStore.bulkDeleteSelectionEnabled"

src/pages/dashboard/dashboardPageStore.js

@@ -221,7 +221,7 @@ export const useDashboardPageStore = defineComponentStore(
 
 				announce(t('common.loading'));
 
-				await fetchSubmissions();
+				await fetchSubmissions({clearData: true});
 				announce(t('common.loaded'));
 			},
 			{immediate: true},