refactor: dont query catalog if switching views (#208)

Author: davidma415

src/components/Catalog.vue

@@ -41,6 +41,7 @@
       <CatalogTableList
         v-else
         :products="catalogItems"
+        :loading="loading"
       />
     </div>
   </div>

src/components/CatalogTableList.vue

@@ -6,6 +6,7 @@
       has-side-border
       :headers="tableHeaders"
       is-small
+      :is-loading="loading"
       is-clickable
       disable-pagination
       @row:click="handleRowClick"
@@ -55,6 +56,10 @@ export default defineComponent({
     products: {
       type: Array as PropType<CatalogItemModel[]>,
       default: () => []
+    },
+    loading: {
+      type: Boolean,
+      default: false
     }
   },
   setup (props) {

src/views/ProductCatalogWrapper.vue

@@ -71,7 +71,7 @@ export default defineComponent({
     const searchString = ref('')
     const catalogItems = ref<CatalogItemModel[]>([])
     const totalCount = ref<number>(undefined)
-    const loading = ref<boolean>(null)
+    const loading = ref<boolean>(true)
     const searchTriggered = ref<boolean>(false)
     const catalogView = ref<string>(undefined)
     const catalogPageNumber = ref(1)
@@ -149,14 +149,12 @@ export default defineComponent({
           console.error('failed to find Service Packages', e)
         }
       } finally {
-        loading.value = null
+        loading.value = false
       }
     }
 
     const catalogViewChanged = (viewType: 'grid' | 'table') => {
-      catalogItems.value = []
       catalogView.value = viewType
-      fetchProducts()
     }
 
     const catalogPageChanged = (pageNumber: number) => {
@@ -167,7 +165,10 @@ export default defineComponent({
     }
 
     onBeforeMount(async () => {
-      await loadAppearance()
+      await Promise.all([
+        loadAppearance(),
+        fetchProducts()
+      ])
     })
 
     return {