🪲 Fix query params for dataset table.

NOTE: 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

The UI related to this is pretty bad, as it causes flicker, but at least the but is avoided.

web/src/components/datasets/DatasetsTable.vue

@@ -1,5 +1,10 @@
 <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"
     :headers="headers"
@@ -119,18 +124,18 @@ const headers = ref([
 const route = useRoute()
 const router = useRouter()
 
-const itemsPerPage = ref(10)
-const page = ref(1)
+const itemsPerPage = ref(parseInt(route.query.perPage as string) || 10)
+const page = ref(parseInt(route.query.page as string) || 1)
 
 watch(
   () => [itemsPerPage.value, page.value],
-  () => {
+  ([newPerPage, newPage]) => {
     const { query } = route
     router.push({
       query: {
         ...query,
-        page: query.page || page.value,
-        perPage: query.itemsPerPage || itemsPerPage.value,
+        perPage: newPerPage,
+        page: newPage,
       },
     })
   },