fix(navbar): disable navbar selectors when loading http calls

Author: dvcol

src/components/common/navbar/NavbarPageSizeSelect.vue

@@ -20,6 +20,10 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  disabled: {
+    type: Boolean,
+    required: false,
+  },
 });
 
 const emit = defineEmits<{
@@ -64,6 +68,7 @@ const pageIcon = computed(() => (pageSize.value > 200 ? IconPageDouble : IconPag
         class="page-select"
         :options="pageSizeOptions"
         :to="parentElement"
+        :disabled="disabled"
       >
         <template #arrow>
           <NIcon :component="open ? IconChevron : pageIcon" />

src/components/views/calendar/CalendarNavbar.vue

@@ -23,7 +23,7 @@ defineProps({
 
 const i18n = useI18n('navbar', 'calendar');
 
-const { filter, center } = useCalendarStoreRefs();
+const { filter, center, loading } = useCalendarStoreRefs();
 const { clearState } = useCalendarStore();
 
 const debouncedSearch = useDebouncedSearch(filter);
@@ -57,6 +57,7 @@ const open = ref(false);
       class="date-picker"
       type="date"
       :to="parentElement"
+      :disabled="loading"
       placement="bottom"
       update-value-on-close
       close-on-select

src/components/views/history/HistoryNavbar.vue

@@ -18,7 +18,8 @@ import { useDebouncedSearch } from '~/utils/store.utils';
 
 const i18n = useI18n('navbar');
 
-const { searchHistory, historyEnd, historyStart, pageSize } = useHistoryStoreRefs();
+const { searchHistory, historyEnd, historyStart, pageSize, loading } =
+  useHistoryStoreRefs();
 const { setHistoryRange } = useHistoryStore();
 
 const debouncedSearch = useDebouncedSearch(searchHistory);
@@ -66,6 +67,7 @@ const open = ref(false);
       close-on-select
       clearable
       :value="pickerValues"
+      :disabled="loading"
       :on-clear="onDateChange"
       :on-confirm="onDateChange"
     >
@@ -84,7 +86,11 @@ const open = ref(false);
         <NIcon :component="IconLoop" />
       </template>
     </NInput>
-    <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
+    <NavbarPageSizeSelect
+      v-model:page-size="pageSize"
+      :parent-element="parentElement"
+      :disabled="loading"
+    />
     <ButtonLinkExternal :href="external" :label="i18n('history', 'common', 'link')" />
   </NFlex>
 </template>

src/components/views/search/SearchNavbar.vue

@@ -97,7 +97,9 @@ const searchOptions = computed<SearchOption[]>(() =>
     label: i18n(type, 'navbar', 'search', 'type'),
     value: type,
     icon: getIcon(type),
-    disabled: selectedValues.value.length <= 1 && selectedValues.value.includes(type),
+    disabled:
+      loading.value ||
+      (selectedValues.value.length <= 1 && selectedValues.value.includes(type)),
   })),
 );
 
@@ -219,7 +221,11 @@ onActivated(() => {
       </template>
     </NTooltip>
 
-    <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
+    <NavbarPageSizeSelect
+      v-model:page-size="pageSize"
+      :parent-element="parentElement"
+      :disabled="loading"
+    />
     <ButtonLinkExternal :href="external" :label="i18n('search', 'common', 'link')" />
 
     <NSwitch

src/components/views/watchlist/WatchlistNavbar.vue

@@ -21,7 +21,7 @@ import { useDebouncedSearch, watchUserChange } from '~/utils/store.utils';
 
 const i18n = useI18n('navbar', 'list');
 
-const { pageSize, searchList } = useListStoreRefs();
+const { pageSize, searchList, listLoading } = useListStoreRefs();
 
 const { listsLoading, lists, activeList } = useListsStoreRefs();
 const { fetchLists, clearState, getIcon } = useListsStore();
@@ -54,6 +54,7 @@ const listOptions = computed<ListOption[]>(() =>
     value: list.id,
     source: list,
     icon: getIcon(list),
+    disabled: listLoading.value || listLoading.value,
   })),
 );
 
@@ -128,7 +129,11 @@ const renderTag = ({ option }: { option: SelectOption }) => option.label?.toStri
         <NIcon :component="IconLoop" />
       </template>
     </NInput>
-    <NavbarPageSizeSelect v-model:page-size="pageSize" :parent-element="parentElement" />
+    <NavbarPageSizeSelect
+      v-model:page-size="pageSize"
+      :parent-element="parentElement"
+      :disabled="listLoading"
+    />
     <ButtonLinkExternal :href="external" :label="i18n('list', 'common', 'link')" />
   </NFlex>
 </template>