SQ

gobitfly · Oct 16, 2024 · 2602efb · 2602efb
1 parent a916539
commit 2602efb
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 102 deletions.
diff --git a/frontend/components/bc/BcAccordion.vue b/frontend/components/bc/BcAccordion.vue
@@ -60,8 +60,8 @@ const copyText = async () => {
         class="bc-accordion-list"
       >
         <li
-          v-for="item in items"
-          :key="`${item}`"
+          v-for="(item, index) in items"
+          :key="`${index}-${item}`"
           class="bc-accordion-list__item"
         >
           <slot name="item" :item />

diff --git a/frontend/components/bc/BcContentFilter.vue b/frontend/components/bc/BcContentFilter.vue
@@ -2,11 +2,11 @@
 import { faMagnifyingGlass } from '@fortawesome/pro-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-interface Props {
+const props = defineProps<{
   disabledFilter?: boolean,
+  isLoading?: boolean,
   searchPlaceholder?: string,
-}
-const props = defineProps<Props>()
+}>()
 
 const emit = defineEmits<{ (e: 'filter-changed', value: string): void }>()
 
@@ -45,6 +45,8 @@ watchDebounced(filter, () => {
     <InputText
       ref="input"
       v-model.trim="filter"
+      type="search"
+      aria-busy="true"
       :placeholder="props.searchPlaceholder"
       :disabled="!isFilterVisible"
       :class="{ visible: isFilterVisible }"
@@ -60,9 +62,18 @@ watchDebounced(filter, () => {
       @click="handleClick"
     >
       <BcScreenreaderOnly>
-        {{ !isFilterVisible ? $t('filter.open') : $t('filter.close') }}
+        {{ isFilterVisible ? $t('filter.open') : $t('filter.close') }}
       </BcScreenreaderOnly>
-      <FontAwesomeIcon :icon="faMagnifyingGlass" />
+      <BcLoadingSpinner
+        v-if="isFilterVisible && isLoading"
+        size="full"
+        alignment="center"
+        loading
+      />
+      <FontAwesomeIcon
+        v-else
+        :icon="faMagnifyingGlass"
+      />
     </Button>
   </div>
 </template>