Merge pull request #1660 from appwrite/preload-flags

Preload the region 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,16 @@
     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;
     let showCreate = false;
+    let addOrganization = false;
 
     const getPlatformInfo = (platform: string) => {
         let name: string, icon: string;
@@ -85,6 +85,7 @@
         if (isCloud) wizard.start(Create);
         else showCreate = true;
     }
+
     $: $registerCommands([
         {
             label: 'Create project',
@@ -120,17 +121,16 @@
         }
     };
 
-    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>
 
@@ -198,7 +198,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,16 @@
 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';
+import { sdk } from '$lib/stores/sdk';
+
+export const regions = writable<RegionList | undefined>(undefined);
+export const regionFlagUrls = derived(regions, ($regions) => {
+    if (!$regions?.regions?.length) return [];
+
+    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

@@ -4,13 +4,22 @@
     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 { regionFlagUrls, 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>
 
+<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>

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);