Skip to content

Commit

Permalink
🪲 Fix flicker on datasets table.
Browse files Browse the repository at this point in the history
Solution: ignore page change while loading. This is a better fix for:
> Use of v-skeleton-loader. If you don't do this the v-data-table-server component will reset the page value on load. See vuetifyjs/vuetify#17966
  • Loading branch information
klondikemarlen committed Mar 13, 2024
1 parent 3a32727 commit 49fbafc
Showing 1 changed file with 8 additions and 6 deletions.
14 changes: 8 additions & 6 deletions web/src/components/datasets/DatasetsTable.vue
Original file line number Diff line number Diff line change
@@ -1,17 +1,13 @@
<template>
<v-skeleton-loader
v-if="isLoading"
type="table"
/>
<v-data-table-server
v-else
v-model:items-per-page="itemsPerPage"
v-model:page="page"
:page="page"
:headers="headers"
:items="datasets"
:items-length="totalCount"
:loading="isLoading"
class="elevation-1"
@update:page="updatePage"
>
<template #top>
<v-row class="ma-1">
Expand Down Expand Up @@ -127,6 +123,12 @@ const router = useRouter()
const itemsPerPage = ref(parseInt(route.query.perPage as string) || 10)
const page = ref(parseInt(route.query.page as string) || 1)
function updatePage(newPage: number) {
if (isLoading.value) return
page.value = newPage
}
watch(
() => [itemsPerPage.value, page.value],
([newPerPage, newPage]) => {
Expand Down

0 comments on commit 49fbafc

Please sign in to comment.