update: preload the flags 🚀

src/lib/elements/flag.svelte

@@ -12,13 +12,10 @@
 
     export function getFlag(country: string, width: number, height: number, quality: number) {
         if (!isValueOfStringEnum(Flag, country)) return '';
-        let flag = sdk.forConsole.avatars
+        return sdk.forConsole.avatars
             .getFlag(country, width * 2, height * 2, quality)
-            ?.toString();
-        flag?.includes('&project=')
-            ? (flag = flag.replace('&project=', '&mode=admin'))
-            : flag + '&mode=admin';
-        return flag;
+            ?.toString()
+            ?.replace('&project=console', '&mode=admin');
     }
 </script>
 

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

@@ -28,16 +28,17 @@
     import { ID, Region } from '@appwrite.io/console';
     import { openImportWizard } from '../project-[project]/settings/migrations/(import)';
     import { readOnly } from '$lib/stores/billing';
-    import type { RegionList } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
     import { organization } from '$lib/stores/organization';
     import { canWriteProjects } from '$lib/stores/roles';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
+    import { regions as regionsStore } from '$routes/(console)/organization-[organization]/store';
 
     export let data;
 
-    let addOrganization = false;
+    $: regionFlagUrls = [];
     let showCreate = false;
+    let addOrganization = false;
 
     const getPlatformInfo = (platform: string) => {
         let name: string, icon: string;
@@ -80,11 +81,22 @@
         );
     }
 
+    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;
     }
+
     $: $registerCommands([
         {
             label: 'Create project',
@@ -120,20 +132,25 @@
         }
     };
 
-    let regions: RegionList;
     onMount(async () => {
         if (isCloud) {
-            regions = await sdk.forConsole.billing.listRegions();
+            const regions = await sdk.forConsole.billing.listRegions();
+            regionsStore.set(regions);
             checkPricingRefAndRedirect($page.url.searchParams);
         }
     });
 
     function findRegion(project: Models.Project) {
-        const region = regions.regions.find((region) => region.$id === project.region);
-        return region;
+        return $regionsStore?.regions?.find((region) => region.$id === project.region);
     }
 </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">
@@ -198,7 +215,7 @@
                                 </Pill>
                             {/if}
                             <svelte:fragment slot="icons">
-                                {#if isCloud && regions}
+                                {#if isCloud && $regionsStore?.regions}
                                     {@const region = findRegion(project)}
                                     <span class="u-color-text-gray u-medium u-line-height-2">
                                         {region?.name}

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

@@ -1,5 +1,8 @@
 import { page } from '$app/stores';
 import type { Models } from '@appwrite.io/console';
-import { derived } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
+import type { RegionList } from '$lib/sdk/billing';
+
+export const regions = writable<RegionList | undefined>(undefined);
 
 export const projects = derived(page, ($page) => $page.data?.projects as Models.ProjectList);

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

@@ -4,11 +4,14 @@
     import { InputText, FormList } from '$lib/elements/forms';
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
-    import { createProject, regions } from './store';
+    import { createProject } from './store';
+    import { regions } from '$routes/(console)/organization-[organization]/store';
 
     let showCustomId = false;
 
-    sdk.forConsole.billing.listRegions().then(regions.set);
+    if (!$regions?.regions) {
+        sdk.forConsole.billing.listRegions().then(regions.set);
+    }
 </script>
 
 <WizardStep>

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

@@ -4,11 +4,12 @@
     import { WizardStep } from '$lib/layout';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { createProject, regions } from './store';
+    import { createProject } 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';
+    import { regions } from '$routes/(console)/organization-[organization]/store';
 
     let prefs: Models.Preferences;
 

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

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