refactor: 💡 Add loading indicator for initial loads

Author: ZedLi

addons/api/addon/utils/sqlite-query.js

@@ -145,12 +145,12 @@ function addSearchConditions({
 
   // Use the special prefix indicator "*" for full-text search
   if (typeOf(search) === 'object') {
-    if (!search?.value) {
+    if (!search?.text) {
       return;
     }
 
     parameters.push(
-      or(search.fields.map((field) => `${field}:"${search.value}"*`)),
+      or(search.fields.map((field) => `${field}:"${search.text}"*`)),
     );
   } else {
     parameters.push(`"${search}"*`);

addons/api/tests/unit/utils/sqlite-query-test.js

@@ -300,6 +300,31 @@ module('Unit | Utility | sqlite-query', function (hooks) {
     ]);
   });
 
+  test('it generates FTS5 search with object parameter', function (assert) {
+    const query = {
+      search: {
+        text: 'favorite',
+        fields: ['name', 'description'],
+      },
+      filters: {
+        type: [{ equals: 'ssh' }],
+      },
+    };
+
+    const { sql, parameters } = generateSQLExpressions('target', query);
+    assert.strictEqual(
+      sql,
+      `
+        SELECT * FROM "target"
+        WHERE (type = ?) AND rowid IN (SELECT rowid FROM target_fts WHERE target_fts MATCH ?)
+        ORDER BY created_time DESC`.removeExtraWhiteSpace(),
+    );
+    assert.deepEqual(parameters, [
+      'ssh',
+      'name:"favorite"* OR description:"favorite"*',
+    ]);
+  });
+
   test('it generates SQL with all clauses combined', function (assert) {
     const query = {
       search: 'favorite',

ui/admin/app/controllers/scopes/scope/session-recordings/index.js

@@ -176,7 +176,7 @@ export default class ScopesScopeSessionRecordingsIndexController extends Control
       {
         select: config.select,
         query: {
-          search: { value: search, fields: config.searchFields },
+          search: { text: search, fields: config.searchFields },
         },
         page: 1,
         pageSize: 250,
@@ -187,13 +187,13 @@ export default class ScopesScopeSessionRecordingsIndexController extends Control
     return results.map(config.mapper);
   }
 
-  async loadItems() {
+  loadItems = restartableTask(async () => {
     this.userFilters.options = await this.retrieveFilterOptions('userFilters');
     this.scopeFilters.options =
       await this.retrieveFilterOptions('scopeFilters');
     this.targetFilters.options =
       await this.retrieveFilterOptions('targetFilters');
-  }
+  });
 
   // =actions
 

ui/admin/app/routes/scopes/scope/session-recordings/index.js

@@ -222,6 +222,6 @@ export default class ScopesScopeSessionRecordingsIndexRoute extends Route {
    */
   setupController(controller) {
     super.setupController(...arguments);
-    controller.loadItems();
+    controller.loadItems.perform();
   }
 }

ui/admin/app/templates/scopes/scope/session-recordings/index.hbs

@@ -55,7 +55,10 @@
               @isSearchable={{true}}
               @searchTerm={{this.userFilters.search}}
               @updateSearchTerm={{fn this.onFilterSearch.perform 'userFilters'}}
-              @isLoading={{this.onFilterSearch.isRunning}}
+              @isLoading={{or
+                this.onFilterSearch.isRunning
+                this.loadItems.isRunning
+              }}
               as |FD selectItem itemOptions|
             >
               {{#each itemOptions as |itemOption|}}
@@ -82,7 +85,10 @@
                 this.onFilterSearch.perform
                 'scopeFilters'
               }}
-              @isLoading={{this.onFilterSearch.isRunning}}
+              @isLoading={{or
+                this.onFilterSearch.isRunning
+                this.loadItems.isRunning
+              }}
               as |FD selectItem itemOptions|
             >
               {{#each-in
@@ -118,7 +124,10 @@
                 this.onFilterSearch.perform
                 'targetFilters'
               }}
-              @isLoading={{this.onFilterSearch.isRunning}}
+              @isLoading={{or
+                this.onFilterSearch.isRunning
+                this.loadItems.isRunning
+              }}
               as |FD selectItem itemOptions|
             >
               {{#each itemOptions as |itemOption|}}