display loading state (#633)

src/SuggestionsApp/SuggestionItem.vue

@@ -2,7 +2,13 @@
   <div class="inline-block">
     <span
       ref="triggerRef"
-      class="mr-1 mt-2 inline-block cursor-pointer rounded px-1 text-base text-primary hover:bg-black/10 hover:underline hover:shadow-md active:bg-black/20 active:shadow-none"
+      class="mr-1 mt-2 inline-block rounded px-1 text-base"
+      :class="{
+        'cursor-not-allowed border border-primary bg-primary/70 text-white shadow-none':
+          isLibLoading,
+        'cursor-pointer text-primary hover:bg-black/10 hover:underline hover:shadow-md active:bg-black/20 active:shadow-none':
+          !isLibLoading,
+      }"
       @click.prevent="$emit('select', catalogLibrary)"
       >+ {{ catalogLibrary.npm }}</span
     >
@@ -76,6 +82,10 @@ const props = defineProps({
     type: Object as PropType<CatalogLibraryT>,
     required: true,
   },
+  isLibLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const contentRef = ref(null);

src/SuggestionsApp/SuggestionsApp.vue

@@ -11,6 +11,7 @@
         v-for="suggestedLibrary in suggestions"
         :key="suggestedLibrary.id"
         :catalog-library="suggestedLibrary"
+        :is-lib-loading="loadingLibraries.includes(suggestedLibrary.npm)"
         @select="onSelect"
       />
       <span
@@ -44,6 +45,7 @@ import { getSuggestions } from '@/suggestionsHelper';
 import { CatalogLibraryT } from '@/data/index';
 import {
   $trimmedLibraries,
+  $loadingLibraries,
   TrimmedLibraryT,
 } from '@/nanostore/trimmedLibraries';
 import { useStore } from '@nanostores/vue';
@@ -58,6 +60,7 @@ import { $addedNpmPackage, $removedLibrary } from '@/nanostore/crudLibrary';
 const size = 5;
 const showAll = ref(false);
 const trimmedLibraries = useStore($trimmedLibraries);
+const loadingLibraries = useStore($loadingLibraries);
 const allSuggestions = computed<CatalogLibraryT[]>(() =>
   getSuggestions(trimmedLibraries.value)
 );

src/nanostore/trimmedLibraries.ts

@@ -15,3 +15,4 @@ export type TrimmedLibraryT = DeepReadonly<
 >;
 export const $trimmedLibraries = atom<TrimmedLibraryT[]>([]);
 export const $isLoading = atom<boolean>(false);
+export const $loadingLibraries = atom<string[]>([]);

src/store/libraries.ts

@@ -1,13 +1,16 @@
 import { reactive, computed, readonly, watch } from 'vue';
 import { RepoT, fetchLibraryByNpm, NpmPackageT } from '@/libraryApis';
 import { LibraryT } from '@/getLibrary';
-import { $trimmedLibraries, $isLoading } from '@/nanostore/trimmedLibraries';
+import {
+  $trimmedLibraries,
+  $isLoading,
+  $loadingLibraries,
+} from '@/nanostore/trimmedLibraries';
 
 // ====== STATE ======
 const librariesR = reactive<LibraryT[]>([]);
-// Track Npm packages and Repos currently being loaded to avoid duplicates
-const npmPackagesLoading = reactive<string[]>([]);
-const reposLoading = reactive<string[]>([]);
+// Track Npm packages currently being loaded to avoid duplicates
+export const npmPackagesLoading = reactive<string[]>([]);
 
 export function sortLibraries(
   sortFn: (_a: LibraryT, _b: LibraryT) => number,
@@ -38,13 +41,15 @@ watch(
   { deep: true }
 );
 
+watch(npmPackagesLoading, (newNpmPackagesLoading) => {
+  $loadingLibraries.set([...newNpmPackagesLoading]);
+});
+
 // ====== COMPUTED ======
 // deprecated in favor of librariesRR to make the value clear - reactive readonly
 export const libraries = readonly(librariesR);
 export const librariesRR = libraries;
-export const isLoading = computed(
-  () => !!npmPackagesLoading.length || !!reposLoading.length
-);
+export const isLoading = computed(() => !!npmPackagesLoading.length);
 watch(isLoading, (isLoadingValue) => $isLoading.set(isLoadingValue));
 export const librariesIds = computed<string[]>(() =>
   librariesR.map((lib) => lib.id)
@@ -148,9 +153,6 @@ export async function addInitialLibrariesByNpm(
   npmPackagesLoading.length = 0;
 }
 
-/**
- * Add a library via a Npm package
- */
 export function addLibraryByNpmPackage(pkgName: string): Promise<void> {
   if (
     !pkgName ||