Display loading spinner in controls bar

web/src/layout/common/ActiveFiltersList.tsx

@@ -1,7 +1,7 @@
 import isEmpty from 'lodash/isEmpty';
 import isUndefined from 'lodash/isUndefined';
 import startCase from 'lodash/startCase';
-import { createEffect, createSignal, For, Match, on, Show, Switch } from 'solid-js';
+import { For, Match, Show, Switch } from 'solid-js';
 
 import { REGEX_UNDERSCORE } from '../../data';
 import { ActiveFilters, FilterCategory, SVGIconKind } from '../../types';
@@ -21,21 +21,11 @@ interface Props {
 
 const ActiveFiltersList = (props: Props) => {
   const activeFilters = () => props.activeFilters;
-  const [showLoading, setShowLoading] = createSignal<boolean>(false);
 
   const onResetFilters = () => {
-    setShowLoading(true);
     props.resetFilters();
   };
 
-  createEffect(
-    on(activeFilters, () => {
-      if (showLoading() && isEmpty(activeFilters())) {
-        setShowLoading(false);
-      }
-    })
-  );
-
   return (
     <Show when={Object.keys(activeFilters()).length > 0}>
       <div class="d-flex flex-row align-items-start mb-3">
@@ -163,11 +153,6 @@ const ActiveFiltersList = (props: Props) => {
             }}
           </For>
         </div>
-        <Show when={showLoading()}>
-          <div class="spinner-border spinner-border-sm text-secondary mt-2" role="status">
-            <span class="visually-hidden">Loading...</span>
-          </div>
-        </Show>
       </div>
     </Show>
   );

web/src/layout/explore/Explore.module.css

@@ -22,6 +22,10 @@
   min-width: 50px !important;
 }
 
+.active {
+  color: var(--bs-white) !important;
+}
+
 .btnSymbol {
   position: relative;
   font-size: 1.25rem;
@@ -78,6 +82,13 @@
   margin-top: -2px;
 }
 
+.spinner {
+  width: 1.5rem !important;
+  height: 1.5rem !important;
+  top: -2px;
+  position: relative;
+}
+
 @media (max-width: 1199.98px) {
   .desktopSelect {
     width: 210px;

web/src/layout/explore/card/Content.tsx

@@ -93,6 +93,15 @@ const Content = (props: Props) => {
     return subtitles;
   };
 
+  const countItems = (content: { [key: string]: unknown }): number => {
+    let numItems: number = 0;
+    Object.keys(content).forEach((subtitle: string) => {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      numItems += (content as any)[subtitle].length;
+    });
+    return numItems;
+  };
+
   return (
     <Show when={!isUndefined(data())}>
       <Switch>
@@ -104,13 +113,7 @@ const Content = (props: Props) => {
             {(title: string) => {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               const content = () => (data() as any)[title] as { [key: string]: unknown } | (BaseItem | Item)[];
-              let numItems: number = 0;
-              if (props.classify === ClassifyOption.Category) {
-                Object.keys(content()).forEach((subtitle: string) => {
-                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                  numItems += (content() as any)[subtitle].length;
-                });
-              }
+              const numItems = () => countItems(content() as { [key: string]: unknown });
 
               return (
                 <div>
@@ -143,7 +146,7 @@ const Content = (props: Props) => {
                                     </div>
                                   </Show>
                                   <div class="text-white text-nowrap text-truncate">
-                                    {title} ({numItems})
+                                    {title} ({numItems()})
                                   </div>
                                 </div>
                                 <div

web/src/layout/explore/grid/index.tsx

@@ -1,5 +1,5 @@
 import isUndefined from 'lodash/isUndefined';
-import { createEffect, createSignal, For, on, onMount, Show } from 'solid-js';
+import { createEffect, createSignal, For, on, Show } from 'solid-js';
 
 import cutString from '../../../utils/cutString';
 import generateColorsArray from '../../../utils/generateColorsArray';
@@ -94,14 +94,11 @@ const GridCategory = (props: Props) => {
 
   createEffect(
     on(data, () => {
+      setColorsList(generateColorsArray(Object.keys(data()).length));
       setCatWithItems(getCategoriesWithItems(data()));
     })
   );
 
-  onMount(() => {
-    setColorsList(generateColorsArray(Object.keys(data()).length));
-  });
-
   return (
     <Show when={firstLoad()}>
       <For each={catWithItems()}>