feat: move location loading state to results bar

Author: themightychris

src/App.vue

@@ -10,6 +10,7 @@ const isResultsExpanded = ref(false)
 const searchQuery = ref('')
 const isSearching = ref(false)
 const isDivisionLoading = ref(false)
+const isLocationLoading = ref(false)
 
 function handleSearch(results) {
   searchResults.value = results
@@ -30,6 +31,10 @@ function handleMapSearch(results) {
 function handleDivisionLoadingChange(loading) {
   isDivisionLoading.value = loading
 }
+
+function handleLocationLoadingChange(loading) {
+  isLocationLoading.value = loading
+}
 </script>
 
 <template>
@@ -45,10 +50,12 @@ function handleDivisionLoadingChange(loading) {
         :isResultsExpanded="isResultsExpanded"
         @update:searchResults="handleMapSearch"
         @update:loading="handleDivisionLoadingChange"
+        @update:locationLoading="handleLocationLoadingChange"
       />
       <SearchResults
         :results="searchResults"
         :isLoading="isSearching || isDivisionLoading"
+        :isLocationLoading="isLocationLoading"
         @update:expanded="handleExpandedChange"
       />
     </div>

src/components/MapView.vue

@@ -13,7 +13,6 @@ let userMarker = null
 
 // Loading states
 const isLoadingMap = ref(true)
-const isLoadingLocation = ref(false)
 
 // Initialize Supabase client
 const supabase = createClient(
@@ -44,7 +43,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['update:searchResults', 'update:loading'])
+const emit = defineEmits(['update:searchResults', 'update:loading', 'update:locationLoading'])
 
 // Create a custom marker element
 function createMarkerElement() {
@@ -185,7 +184,7 @@ async function selectDivision(division, location = null) {
 
 // Function to highlight user's division
 async function highlightUserDivision() {
-  isLoadingLocation.value = true;
+  emit('update:locationLoading', true);
 
   try {
     const location = await getUserLocation();
@@ -212,7 +211,7 @@ async function highlightUserDivision() {
   } catch (error) {
     console.error('Error getting user location:', error);
   } finally {
-    isLoadingLocation.value = false;
+    emit('update:locationLoading', false);
   }
 }
 
@@ -328,16 +327,11 @@ onUnmounted(() => {
   <div class="map-container">
     <div ref="mapContainer" class="map"></div>
 
-    <!-- Loading overlays -->
+    <!-- Loading overlay -->
     <div v-if="isLoadingMap" class="loading-overlay">
       <div class="loading-spinner"></div>
       <div class="loading-text">Loading map data...</div>
     </div>
-
-    <div v-if="isLoadingLocation" class="loading-overlay">
-      <div class="loading-spinner"></div>
-      <div class="loading-text">Getting your location...</div>
-    </div>
   </div>
 </template>
 

src/components/SearchResults.vue

@@ -10,6 +10,10 @@ const props = defineProps({
   isLoading: {
     type: Boolean,
     default: false
+  },
+  isLocationLoading: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -25,6 +29,10 @@ const hasResults = computed(() => props.results.matches.length > 0)
 
 // Compute the results title based on the type of search
 const resultsTitle = computed(() => {
+  if (props.isLocationLoading) {
+    return 'Getting your location...'
+  }
+
   if (props.isLoading) {
     return 'Loading results...'
   }
@@ -61,7 +69,7 @@ watch(() => props.results.matches.length, (newCount) => {
 
 const toggleExpand = () => {
   // Only allow toggling if there are results and not loading
-  if (hasResults.value && !props.isLoading) {
+  if (hasResults.value && !props.isLoading && !props.isLocationLoading) {
     isExpanded.value = !isExpanded.value
     emit('update:expanded', isExpanded.value)
   }
@@ -73,7 +81,7 @@ const toggleExpand = () => {
     <div class="results-header" @click="toggleExpand">
       <div class="header-content">
         <span class="result-count">{{ resultsTitle }}</span>
-        <div v-if="props.isLoading" class="loading-spinner"></div>
+        <div v-if="isLoading || isLocationLoading" class="loading-spinner"></div>
         <button v-else-if="hasResults" class="expand-button">
           {{ isExpanded ? '▼' : '▲' }}
         </button>