diff --git a/client/src/components/Grid/GridList.vue b/client/src/components/Grid/GridList.vue index d43c9716f2d..d3b6f1c20df 100644 --- a/client/src/components/Grid/GridList.vue +++ b/client/src/components/Grid/GridList.vue @@ -2,12 +2,11 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; +import { useDebounceFn } from "@vueuse/core"; import { BAlert, BButton, BLink, BPagination } from "bootstrap-vue"; import { computed, onMounted, ref, watch } from "vue"; import { useRouter } from "vue-router/composables"; -import { timeout } from "@/utils/timeout"; - import { Config, FieldHandler, Operation, RowData } from "./configs/types"; import GridLink from "./GridElements/GridLink.vue"; @@ -25,11 +24,14 @@ const router = useRouter(); interface Props { // provide a grid configuration config: Config; + // debounce delay + delay?: number; // rows per page to be shown limit?: number; } const props = withDefaults(defineProps(), { + delay: 5000, limit: 25, }); @@ -60,6 +62,11 @@ const filterText = ref(""); const searchTerm = ref(""); const showAdvanced = ref(false); +// hide message helper +const hideMessage = useDebounceFn(() => { + operationMessage.value = ""; +}, props.delay); + /** * Manually set filter value, used for tags and `SharingIndicators` */ @@ -156,9 +163,7 @@ watch([currentPage, searchTerm, sortDesc, sortBy], () => getGridData()); * Operation message timeout handler */ watch(operationMessage, () => { - timeout(() => { - operationMessage.value = ""; - }); + hideMessage(); });