fix: load regions

src/routes/console/organization-[organization]/wizard/step1.svelte

@@ -3,9 +3,12 @@
     import { Pill } from '$lib/elements';
     import { InputText, FormList } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
-    import { createProject } from './store';
+    import { sdk } from '$lib/stores/sdk';
+    import { createProject, regions } from './store';
 
     let showCustomId = false;
+
+    sdk.forConsole.billing.listRegions().then(regions.set);
 </script>
 
 <WizardStep>

src/routes/console/organization-[organization]/wizard/step2.svelte

@@ -4,16 +4,16 @@
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { createProject } from './store';
-    import type { Region, RegionList } from '$lib/sdk/billing';
+    import { createProject, regions } from './store';
+    import type { Region } from '$lib/sdk/billing';
     import { addNotification } from '$lib/stores/notifications';
     import type { Models } from '@appwrite.io/console';
+    import { page } from '$app/stores';
 
-    let regions: RegionList;
     let prefs: Models.Preferences;
+
     onMount(async () => {
-        regions = await sdk.forConsole.billing.listRegions();
-        prefs = await sdk.forConsole.account.getPrefs();
+        prefs = $page.data.account.prefs;
     });
 
     async function notifyRegion(selectedRegion: Region) {
@@ -66,11 +66,11 @@
     <svelte:fragment slot="subtitle">
         Choose a deployment region for your project. This region cannot be changed.
     </svelte:fragment>
-    {#if regions?.total}
+    {#if $regions}
         <ul
             class="grid-box u-margin-block-start-16"
             style="--p-grid-item-size:12em; --p-grid-item-size-small-screens:12rem; --grid-gap: 1rem;">
-            {#each regions.regions.filter((r) => r.$id !== 'default') as region}
+            {#each $regions.regions.filter((r) => r.$id !== 'default') as region}
                 <li>
                     <RegionCard
                         name="region"
@@ -115,7 +115,6 @@
                                     height={30}
                                     flag={region.flag}
                                     name={region.name} />
-
                                 {region.name}
                             {/if}
                         </div>

src/routes/console/organization-[organization]/wizard/store.ts

@@ -1,3 +1,4 @@
+import type { RegionList } from '$lib/sdk/billing';
 import { writable } from 'svelte/store';
 
 export const createProject = writable<{
@@ -9,3 +10,5 @@ export const createProject = writable<{
     name: null,
     region: 'fra'
 });
+
+export const regions = writable<RegionList | undefined>(undefined);