fix: improve Software center search and navigation

Author: andre8244

core/ui/src/components/software-center/AppList.vue

@@ -30,7 +30,7 @@
         class="card-grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4"
       >
         <cv-tile
-          v-for="(app, index) in appsLoaded"
+          v-for="(app, index) in apps"
           :key="index"
           kind="standard"
           class="app"
@@ -155,7 +155,6 @@
           </div>
         </cv-tile>
       </div>
-      <infinite-loading @infinite="infiniteScrollHandler"></infinite-loading>
     </div>
     <AppInfoModal
       :app="appInfo.app"
@@ -193,25 +192,13 @@ export default {
         isShown: false,
         app: null,
       },
-      // infinite scroll
-      appsLoaded: [],
-      pageNum: 0,
-      pageSize: 50,
-      isShownCoreAppModal: false,
     };
   },
   computed: {
     coreApp() {
       return this.apps.find((app) => app.id == "core");
     },
   },
-  watch: {
-    apps: function () {
-      this.appsLoaded = [];
-      this.pageNum = 0;
-      this.infiniteScrollHandler();
-    },
-  },
   methods: {
     installInstance(app) {
       this.$emit("install", app);
@@ -231,25 +218,6 @@ export default {
         context.appInfo.isShown = false;
       }, 250);
     },
-    infiniteScrollHandler($state) {
-      const pageApps = this.apps.slice(
-        this.pageNum * this.pageSize,
-        (this.pageNum + 1) * this.pageSize
-      );
-
-      if (pageApps.length) {
-        this.pageNum++;
-        this.appsLoaded.push(...pageApps);
-
-        if ($state) {
-          $state.loaded();
-        }
-      } else {
-        if ($state) {
-          $state.complete();
-        }
-      }
-    },
     getApplicationCategories(app) {
       let categories = [];
 

core/ui/src/views/SoftwareCenter.vue

@@ -333,16 +333,11 @@
           <h6 class="search-results-title">
             {{ $t("software_center.search_results") }}
           </h6>
-          <AppList
-            v-if="searchResults.length"
-            :apps="searchResults"
-            :skeleton="loading.listModules || loading.listCoreModules"
-            tab="search"
-            @install="openInstallModal"
-            key="search-app-list"
+          <cv-tile
+            v-if="!searchResults.length && !loading.listModules"
+            kind="standard"
             :light="true"
-          />
-          <cv-tile v-else kind="standard" :light="true">
+          >
             <NsEmptyState
               :title="$t('software_center.no_app_found')"
               :animationData="GhostLottie"
@@ -355,6 +350,15 @@
               </template>
             </NsEmptyState>
           </cv-tile>
+          <AppList
+            v-else
+            :apps="searchResults"
+            :skeleton="loading.listModules || loading.listCoreModules"
+            tab="search"
+            @install="openInstallModal"
+            key="search-app-list"
+            :light="true"
+          />
         </div>
       </div>
     </cv-grid>
@@ -473,9 +477,10 @@ export default {
     },
   },
   watch: {
-    "q.search": function () {
-      if (!this.q.search) {
-        this.q.view = "all";
+    modules() {
+      // perform search again when modules are updated
+      if (this.q.view === "search" && this.q.search) {
+        this.searchApp(this.q.search);
       }
     },
   },
@@ -563,11 +568,6 @@ export default {
       }
       this.appUpdates = appUpdates;
       this.modules = modules;
-
-      // perform search on browser history navigation (e.g. going back to software center)
-      if (this.q.search) {
-        this.searchApp(this.q.search);
-      }
       this.listCoreModules();
     },
     async listCoreModules() {
@@ -709,6 +709,7 @@ export default {
       }
     },
     contentSwitcherSelected(value) {
+      this.q.search = "";
       this.q.view = value;
     },
     goToUpdates() {