fix(release): await region loading when loading releases

Author: dvcol

src/components/views/releases/ReleasesNavbar.vue

@@ -2,7 +2,7 @@
 import { TmdbMovieReleaseType } from '@dvcol/tmdb-http-client/models';
 import { NDatePicker, NFlex, NIcon, NSelect, type SelectOption } from 'naive-ui';
 
-import { computed, defineProps, onBeforeMount, ref } from 'vue';
+import { computed, defineProps, onActivated, ref } from 'vue';
 
 import IconCalendar from '~/components/icons/IconCalendar.vue';
 import IconChevron from '~/components/icons/IconChevronDownSmall.vue';
@@ -47,7 +47,7 @@ const regionOptions = computed<SelectOption[]>(() =>
 
 const open = ref(false);
 
-onBeforeMount(() => fetchRegions());
+onActivated(() => fetchRegions());
 </script>
 
 <template>

src/stores/data/releases.store.ts

@@ -76,6 +76,7 @@ export const useReleasesStore = defineStore(ReleasesStoreConstants.Store, () =>
   const endCalendar = ref<Date>(DateUtils.weeks.next(weeks.value, center.value));
 
   const regionLoading = ref(true);
+  const regionLoadingPromise = ref<Promise<TmdbConfigurationCounty[]>>();
   const regions = ref<TmdbConfigurationCounty[]>([]);
   const region = ref<TmdbConfigurationCounty | undefined>();
   const releaseType = ref<TmdbMovieReleaseTypes>(TmdbMovieReleaseType.Theatrical);
@@ -119,13 +120,15 @@ export const useReleasesStore = defineStore(ReleasesStoreConstants.Store, () =>
   const fetchRegions = async () => {
     regionLoading.value = true;
     try {
-      regions.value = await TraktService.providers.regions();
+      regionLoadingPromise.value = TraktService.providers.regions();
+      regions.value = await regionLoadingPromise.value;
       if (!region.value) region.value = getLocaleRegion();
     } catch (e) {
       Logger.error('Failed to fetch regions');
       NotificationService.error('Failed to fetch regions', e);
     } finally {
       regionLoading.value = false;
+      regionLoadingPromise.value = undefined;
     }
   };
 
@@ -135,8 +138,13 @@ export const useReleasesStore = defineStore(ReleasesStoreConstants.Store, () =>
       return;
     }
 
+    if (regionLoading.value && regionLoadingPromise.value) {
+      Logger.warn('Waiting for region to load...');
+      await regionLoadingPromise.value;
+    }
+
     if (!region.value) {
-      Logger.warn('Region not selected');
+      Logger.warn('Region not selected', { region: region.value, regions: [...regions.value], regionLoading: regionLoading.value });
       return;
     }