handle characters and options loading separately

app/pages/index.vue

@@ -1,15 +1,14 @@
-<!--suppress VueUnrecognizedSlot -->
 <template>
   <!--suppress JSValidateTypes -->
   <DataTable
     :value="characters"
     dataKey="id"
-    :loading="isLoading"
+    :loading="isLoadingCharacters"
     sortField="createdAt"
     :sortOrder="1"
     removableSort
     v-model:filters="filters"
-    :filterDisplay="showFilters ? 'row' : null"
+    :filterDisplay="showFilters && !isLoadingOptions ? 'row' : null"
     :globalFilterFields="globalFilterFieldNames"
     selectionMode="single"
     resizableColumns
@@ -76,7 +75,7 @@
     </Column>
 
     <template #header>
-      <div :class="isLoading && 'hidden'">
+      <div :class="isLoadingOptions && 'hidden'">
         <div class="flex justify-between gap-4 pb-2">
           <SearchField
             v-model="filters['global'].value"
@@ -137,7 +136,7 @@
     <template #empty>
       <div
         class="text-center text-2xl"
-        :class="isLoading && 'hidden'"
+        :class="isLoadingCharacters && 'hidden'"
       >
         <template v-if="hasGlobalFilter()">
           <template v-if="hasAnyColumnFilters()">
@@ -168,7 +167,7 @@
 
     <template #footer>
       <CharacterToolbar
-        :class="isLoading && 'hidden'"
+        :class="isLoadingCharacters && 'hidden'"
         :filteredCount="filteredCount"
         :count="count"
       />
@@ -180,7 +179,6 @@
 definePageMeta({ name: "characters" })
 
 const { isSignedIn } = useAuthClient()
-
 const filtersStore = useFiltersStore()
 
 const {
@@ -195,17 +193,16 @@ const {
 
 const { filters, showFilters } = storeToRefs(filtersStore)
 
-const { data: characters, isLoading: isLoadingCharacters } =
-  useQuery(characterListQuery)
+const {
+  data: characters,
+  isLoading: isLoadingCharacters,
+  refetch: refetchCharacters
+} = useQuery(characterListQuery)
 
 const { data: options, isLoading: isLoadingOptions } = useQuery(
   characterOptionsQuery
 )
 
-const isLoading = computed(
-  () => isLoadingCharacters.value || isLoadingOptions.value
-)
-
 const count = computed(() => _size(characters.value))
 const filteredCount = computed(() => _size(filteredCharacters.value))
 const filteredCharacters = ref(_cloneDeep(characters.value))
@@ -217,7 +214,11 @@ const filteredOptions = computed(() =>
 const DEFAULT_ELEMENT_HEIGHTS = 160
 const elementHeights = ref(DEFAULT_ELEMENT_HEIGHTS)
 
-onMounted(() => updateElementHeights())
+onMounted(() => {
+  refetchCharacters()
+  updateElementHeights()
+})
+
 onUpdated(() => updateElementHeights())
 
 function updateFilteredCharacters(filteredValue) {
@@ -240,9 +241,13 @@ function totalElementHeights() {
   // total height of non-datatable elements (in pixels)
   const elements = ["navbar", "datatable_header", "datatable_footer"]
 
+  // noinspection JSUnresolvedReference
   let totalHeights = _reduce(
     elements,
-    (acc, element) => acc + document?.getElementById(element)?.offsetHeight,
+    (acc, element) => {
+      // noinspection JSUnresolvedReference
+      return acc + document?.getElementById(element)?.offsetHeight
+    },
     0
   )