improve: preload call site.

src/routes/(console)/organization-[organization]/+page.svelte

@@ -36,7 +36,6 @@
 
     export let data;
 
-    $: regionFlagUrls = [];
     let showCreate = false;
     let addOrganization = false;
 
@@ -81,17 +80,7 @@
         );
     }
 
-    function preloadFlagUrls() {
-        // url is same as in Flag#getFlag component.
-        // make sure to use the same for correct preloading!
-        regionFlagUrls = $regionsStore.regions.map((region) => {
-            return `${sdk.forConsole.client.config.endpoint}/avatars/flags/${region.flag}?width=80&height=60&quality=100&mode=admin`;
-        });
-    }
-
     function handleCreateProject() {
-        preloadFlagUrls();
-
         if (!$canWriteProjects) return;
         if (isCloud) wizard.start(Create);
         else showCreate = true;
@@ -145,12 +134,6 @@
     }
 </script>
 
-<svelte:head>
-    {#each regionFlagUrls as image}
-        <link rel="preload" as="image" href={image} />
-    {/each}
-</svelte:head>
-
 {#if $organization?.$id}
     <Container>
         <div class="u-flex u-gap-12 common-section u-main-space-between">

src/routes/(console)/organization-[organization]/store.ts

@@ -2,7 +2,13 @@ import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 import type { RegionList } from '$lib/sdk/billing';
+import { sdk } from '$lib/stores/sdk';
 
 export const regions = writable<RegionList | undefined>(undefined);
+export const regionFlagUrls = derived(regions, ($regions) => {
+    return $regions?.regions?.map((region) => {
+        return `${sdk.forConsole.client.config.endpoint}/avatars/flags/${region.flag}?width=80&height=60&quality=100&mode=admin`;
+    });
+});
 
 export const projects = derived(page, ($page) => $page.data?.projects as Models.ProjectList);

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

@@ -5,7 +5,7 @@
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { createProject } from './store';
-    import { regions } from '$routes/(console)/organization-[organization]/store';
+    import { regionFlagUrls, regions } from '$routes/(console)/organization-[organization]/store';
 
     let showCustomId = false;
 
@@ -14,6 +14,12 @@
     }
 </script>
 
+<svelte:head>
+    {#each $regionFlagUrls as image}
+        <link rel="preload" as="image" href={image} />
+    {/each}
+</svelte:head>
+
 <WizardStep>
     <svelte:fragment slot="title">Details</svelte:fragment>
     <FormList>