Add loading indicator for search queries

app/components/category-chips.gjs

@@ -5,6 +5,7 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import Icon from '#components/icon';
 import { POI_CATEGORIES } from '../utils/poi-categories';
+import { eq, and } from 'ember-truth-helpers';
 
 export default class CategoryChipsComponent extends Component {
   @service router;
@@ -41,6 +42,7 @@ export default class CategoryChipsComponent extends Component {
             class="category-chip"
             {{on "click" (fn this.searchCategory category)}}
             aria-label={{category.label}}
+            disabled={{and (eq this.mapUi.loadingState.type "category") (eq this.mapUi.loadingState.value category.id)}}
           >
             <Icon @name={{category.icon}} @size={{16}} />
             <span>{{category.label}}</span>

app/components/search-box.gjs

@@ -8,7 +8,7 @@ import { task, timeout } from 'ember-concurrency';
 import Icon from '#components/icon';
 import humanizeOsmTag from '../helpers/humanize-osm-tag';
 import { POI_CATEGORIES } from '../utils/poi-categories';
-import eq from 'ember-truth-helpers/helpers/eq';
+import { eq, or } from 'ember-truth-helpers';
 
 export default class SearchBoxComponent extends Component {
   @service photon;
@@ -211,7 +211,11 @@ export default class SearchBoxComponent extends Component {
         />
 
         <button type="submit" class="search-submit-btn" aria-label="Search">
+          {{#if (or (eq this.mapUi.loadingState.type "text") (eq this.mapUi.loadingState.type "category"))}}
+            <Icon @name="loading-ring" @size={{20}} />
+          {{else}}
             <Icon @name="search" @size={{20}} @color="#5f6368" />
+          {{/if}}
         </button>
 
         {{#if this.query}}

app/icons/270-ring.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-ember-extension="1"><path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.7,12.39A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>

app/routes/search.js

@@ -22,9 +22,16 @@ export default class SearchRoute extends Route {
     const lat = params.lat ? parseFloat(params.lat) : null;
     const lon = params.lon ? parseFloat(params.lon) : null;
     let pois = [];
+    let loadingType = null;
+    let loadingValue = null;
 
+    try {
       // Case 0: Category Search (category parameter present)
       if (params.category && lat && lon) {
+        loadingType = 'category';
+        loadingValue = params.category;
+        this.mapUi.startLoading(loadingType, loadingValue);
+
         // We need bounds. If we have active map state, use it.
         let bounds = this.mapUi.currentBounds;
 
@@ -42,7 +49,12 @@ export default class SearchRoute extends Route {
           };
         }
 
-      pois = await this.osm.getCategoryPois(bounds, params.category, lat, lon);
+        pois = await this.osm.getCategoryPois(
+          bounds,
+          params.category,
+          lat,
+          lon
+        );
 
         // Sort by distance from center
         pois = pois
@@ -54,6 +66,10 @@ export default class SearchRoute extends Route {
       }
       // Case 1: Text Search (q parameter present)
       else if (params.q) {
+        loadingType = 'text';
+        loadingValue = params.q;
+        this.mapUi.startLoading(loadingType, loadingValue);
+
         // Search with Photon (using lat/lon for bias if available)
         pois = await this.photon.search(params.q, lat, lon);
 
@@ -80,6 +96,7 @@ export default class SearchRoute extends Route {
       }
       // Case 2: Nearby Search (lat/lon present, no q)
       else if (lat && lon) {
+        // Nearby search does NOT trigger loading state (pulse is used instead)
         const searchRadius = 50; // Default radius
 
         // Fetch POIs from Overpass
@@ -114,6 +131,11 @@ export default class SearchRoute extends Route {
           })
           .sort((a, b) => a._distance - b._distance);
       }
+    } finally {
+      if (loadingType && loadingValue) {
+        this.mapUi.stopLoading(loadingType, loadingValue);
+      }
+    }
 
     // Check if any of these are already bookmarked
     // We resolve them to the bookmark version if they exist

app/services/map-ui.js

@@ -14,6 +14,7 @@ export default class MapUiService extends Service {
   @tracked preventNextZoom = false;
   @tracked searchResults = [];
   @tracked currentSearch = null;
+  @tracked loadingState = null;
 
   selectPlace(place, options = {}) {
     this.selectedPlace = place;
@@ -70,4 +71,26 @@ export default class MapUiService extends Service {
   updateBounds(bounds) {
     this.currentBounds = bounds;
   }
+
+  startLoading(type, value) {
+    this.loadingState = { type, value };
+  }
+
+  stopLoading(type = null, value = null) {
+    // If no arguments provided, force stop (legacy/cleanup)
+    if (!type && !value) {
+      this.loadingState = null;
+      return;
+    }
+
+    // Only clear if the current state matches the request
+    // This prevents a previous search from clearing the state of a new search
+    if (
+      this.loadingState &&
+      this.loadingState.type === type &&
+      this.loadingState.value === value
+    ) {
+      this.loadingState = null;
+    }
+  }
 }

app/styles/app.css

@@ -1315,3 +1315,9 @@ button.create-place {
 .category-chip:active {
   background: #eee;
 }
+
+.category-chip:disabled {
+  opacity: 0.75;
+  cursor: not-allowed;
+  pointer-events: none;
+}

app/utils/icons.js

@@ -34,6 +34,7 @@ import user from 'feather-icons/dist/icons/user.svg?raw';
 import villageBuildings from '@waysidemapping/pinhead/dist/icons/village_buildings.svg?raw';
 import x from 'feather-icons/dist/icons/x.svg?raw';
 import zap from 'feather-icons/dist/icons/zap.svg?raw';
+import loadingRing from '../icons/270-ring.svg?raw';
 
 import angelfish from '@waysidemapping/pinhead/dist/icons/angelfish.svg?raw';
 import barbell from '@waysidemapping/pinhead/dist/icons/barbell.svg?raw';
@@ -211,6 +212,7 @@ const ICONS = {
   wikipedia,
   x,
   zap,
+  'loading-ring': loadingRing,
 };
 
 const FILLED_ICONS = [
@@ -221,6 +223,7 @@ const FILLED_ICONS = [
   'shopping-basket',
   'camera',
   'person-sleeping-in-bed',
+  'loading-ring',
 ];
 
 export function getIcon(name) {

tests/acceptance/search-loading-test.js

@@ -0,0 +1,97 @@
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'marco/tests/helpers';
+import Service from '@ember/service';
+import { Promise } from 'rsvp';
+
+class MockPhotonService extends Service {
+  async search(query) {
+    // Simulate network delay
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    if (query === 'slow') {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+    return [
+      {
+        title: 'Test Place',
+        lat: 1,
+        lon: 1,
+        osmId: '123',
+        osmType: 'node',
+      },
+    ];
+  }
+}
+
+class MockOsmService extends Service {
+  async getCategoryPois(bounds, category) {
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    if (category === 'slow_category') {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
+    return [];
+  }
+  async getNearbyPois() {
+    return [];
+  }
+}
+
+module('Acceptance | search loading', function (hooks) {
+  setupApplicationTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.owner.register('service:photon', MockPhotonService);
+    this.owner.register('service:osm', MockOsmService);
+  });
+
+  test('search shows loading indicator but nearby search does not', async function (assert) {
+    const mapUi = this.owner.lookup('service:map-ui');
+
+    // 1. Text Search
+    // Start a search and check for loading state immediately
+    const searchPromise = visit('/search?q=slow');
+
+    // We can't easily check the DOM mid-transition in acceptance tests without complicated helpers,
+    // so we check the service state which drives the UI.
+    // Wait a tiny bit for the route to start processing
+    await new Promise((r) => setTimeout(r, 10));
+
+    assert.deepEqual(
+      mapUi.loadingState,
+      { type: 'text', value: 'slow' },
+      'Loading state is set for text search'
+    );
+
+    await searchPromise;
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is cleared after text search'
+    );
+
+    // 2. Category Search
+    const catPromise = visit('/search?category=slow_category&lat=1&lon=1');
+    await new Promise((r) => setTimeout(r, 10));
+
+    assert.deepEqual(
+      mapUi.loadingState,
+      { type: 'category', value: 'slow_category' },
+      'Loading state is set for category search'
+    );
+
+    await catPromise;
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is cleared after category search'
+    );
+
+    // 3. Nearby Search
+    await visit('/search?lat=1&lon=1');
+    assert.strictEqual(
+      mapUi.loadingState,
+      null,
+      'Loading state is NOT set for nearby search'
+    );
+  });
+});

tests/unit/services/map-ui-test.js

@@ -0,0 +1,68 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'marco/tests/helpers';
+
+module('Unit | Service | map-ui', function (hooks) {
+  setupTest(hooks);
+
+  test('it handles loading state correctly', function (assert) {
+    let service = this.owner.lookup('service:map-ui');
+
+    // Initial state
+    assert.strictEqual(
+      service.loadingState,
+      null,
+      'loadingState starts as null'
+    );
+
+    // Start loading search A
+    service.startLoading('search', 'A');
+    assert.deepEqual(
+      service.loadingState,
+      { type: 'search', value: 'A' },
+      'loadingState is set to search A'
+    );
+
+    // Stop loading search A (successful case)
+    service.stopLoading('search', 'A');
+    assert.strictEqual(
+      service.loadingState,
+      null,
+      'loadingState is cleared when stopped with matching parameters'
+    );
+  });
+
+  test('it handles race condition: stopLoading only clears if parameters match', function (assert) {
+    let service = this.owner.lookup('service:map-ui');
+
+    // 1. Start loading search A
+    service.startLoading('search', 'A');
+    assert.deepEqual(service.loadingState, { type: 'search', value: 'A' });
+
+    // 2. Start loading search B (interruption)
+    // In a real app, search B would start before search A finishes.
+    service.startLoading('search', 'B');
+    assert.deepEqual(
+      service.loadingState,
+      { type: 'search', value: 'B' },
+      'loadingState updates to search B'
+    );
+
+    // 3. Search A finishes and tries to stop loading
+    // The service should ignore this because current loading state is for B
+    service.stopLoading('search', 'A');
+
+    assert.deepEqual(
+      service.loadingState,
+      { type: 'search', value: 'B' },
+      'loadingState remains search B even after stopping search A'
+    );
+
+    // 4. Search B finishes
+    service.stopLoading('search', 'B');
+    assert.strictEqual(
+      service.loadingState,
+      null,
+      'loadingState is cleared when search B stops'
+    );
+  });
+});