Improve sign in speed and loading feedback (#3441)

* WIP

* Show loading indicator on enabling multiple accounts.

* Show loading indicator on enabling multiple accounts.

Author: sea-snake

src/frontend/src/lib/globals.ts

@@ -13,7 +13,6 @@ import {
 import { inferHost } from "$lib/utils/iiConnection";
 import { idlFactory as internet_identity_idl } from "$lib/generated/internet_identity_idl";
 import { features } from "$lib/legacy/features";
-import { LazyHttpAgent } from "$lib/utils/lazyHttpAgent";
 
 export let canisterId: Principal;
 export let canisterConfig: InternetIdentityInit;
@@ -29,7 +28,10 @@ export const initGlobals = () => {
     shouldFetchRootKey:
       features.FETCH_ROOT_KEY || (canisterConfig.fetch_root_key[0] ?? false),
   };
-  anonymousAgent = LazyHttpAgent.createLazy(agentOptions);
+  anonymousAgent = HttpAgent.createSync(agentOptions);
+  // Fetch subnet keys to speed up queries during authentication,
+  // this avoids having to fetch them later on user interaction.
+  void anonymousAgent.fetchSubnetKeys(canisterId);
   anonymousActor = Actor.createActor<_SERVICE>(internet_identity_idl, {
     agent: anonymousAgent,
     canisterId,

src/frontend/src/lib/stores/authentication.store.ts

@@ -10,7 +10,6 @@ import {
 import { Principal } from "@icp-sdk/core/principal";
 import type { _SERVICE } from "$lib/generated/internet_identity_types";
 import { idlFactory as internet_identity_idl } from "$lib/generated/internet_identity_idl";
-import { LazyHttpAgent } from "$lib/utils/lazyHttpAgent";
 import { createAnonymousNonce } from "$lib/utils/openID";
 
 export interface Authenticated {
@@ -40,7 +39,10 @@ const internalStore = writable<{
 
 export const authenticationStore: AuthenticationStore = {
   init: ({ canisterId, agentOptions }) => {
-    const agent = LazyHttpAgent.createLazy(agentOptions);
+    const agent = HttpAgent.createSync(agentOptions);
+    // Fetch subnet keys to speed up queries during authentication,
+    // this avoids having to fetch them later on user interaction.
+    void agent.fetchSubnetKeys(canisterId);
     const actor = Actor.createActor<_SERVICE>(internet_identity_idl, {
       agent,
       canisterId,

src/frontend/src/lib/stores/session.store.ts

@@ -11,7 +11,6 @@ import { createAnonymousNonce } from "$lib/utils/openID";
 import type { _SERVICE } from "$lib/generated/internet_identity_types";
 import { Principal } from "@icp-sdk/core/principal";
 import { idlFactory as internet_identity_idl } from "$lib/generated/internet_identity_idl";
-import { LazyHttpAgent } from "$lib/utils/lazyHttpAgent";
 import { fromBase64, toBase64 } from "$lib/utils/utils";
 import { isNullish } from "@dfinity/utils";
 
@@ -95,7 +94,10 @@ const read = async () => {
 export const sessionStore: SessionStore = {
   init: async ({ canisterId, agentOptions }) => {
     const { identity, nonce, salt } = (await read()) ?? (await create());
-    const agent = LazyHttpAgent.createLazy({ ...agentOptions, identity });
+    const agent = HttpAgent.createSync({ ...agentOptions, identity });
+    // Fetch subnet keys to speed up queries during authentication,
+    // this avoids having to fetch them later on user interaction.
+    void agent.fetchSubnetKeys(canisterId);
     const actor = Actor.createActor<_SERVICE>(internet_identity_idl, {
       agent,
       canisterId,

src/frontend/src/lib/utils/lazyHttpAgent.ts

@@ -23,7 +23,7 @@
     authenticationStore,
     isAuthenticatedStore,
   } from "$lib/stores/authentication.store";
-  import { throwCanisterError } from "$lib/utils/utils";
+  import { throwCanisterError, waitFor } from "$lib/utils/utils";
   import type {
     AccountInfo,
     AccountNumber,
@@ -32,6 +32,7 @@
   import { slide, fade, scale } from "svelte/transition";
   import Dialog from "$lib/components/ui/Dialog.svelte";
   import EditAccount from "$lib/components/views/EditAccount.svelte";
+  import ProgressRing from "$lib/components/ui/ProgressRing.svelte";
 
   const PRIMARY_ACCOUNT_NUMBER = undefined;
   const MAX_ACCOUNTS = 5;
@@ -75,9 +76,12 @@
     accounts?.map((account) => account.name[0] ?? primaryAccountName) ?? [],
   );
   const authLastUsedFlow = new AuthLastUsedFlow();
+  const selectedIdentityNumber = $derived(
+    $lastUsedIdentitiesStore.selected!.identityNumber,
+  );
   // Initialize the flow every time the identity changes
   $effect(() => {
-    authLastUsedFlow.init([$lastUsedIdentitiesStore.selected!.identityNumber]);
+    authLastUsedFlow.init([selectedIdentityNumber]);
   });
 
   const handleContinueDefault = async () => {
@@ -286,44 +290,42 @@
   </div>
 {/snippet}
 
-{#snippet accountList()}
+{#snippet accountList(accounts: AccountInfo[])}
   <div class="col-start-1 row-start-1" out:fade={{ duration: 100 }}>
     <div class="!min-h-18" out:slide={{ axis: "y", duration: 300 }}>
-      {#if nonNullish(accounts)}
-        <div class="!min-h-18" in:slide={{ axis: "y", duration: 300 }}>
-          <div class="flex flex-col gap-2 pb-6" in:fade={{ duration: 300 }}>
-            <ul class="contents" aria-label={$t`Choose an account`}>
-              {#each accounts as account (account.account_number[0])}
-                <li class="contents">
-                  {@render accountListItem(account)}
-                </li>
-              {/each}
-            </ul>
-            <Tooltip
-              label={$t`Limit reached`}
-              description={$plural(MAX_ACCOUNTS, {
-                one: `You have reached the maximum of # account for a single app.`,
-                other: `You have reached the maximum of # accounts for a single app.`,
-              })}
-              direction="up"
-              align="center"
-              hidden={!isAccountLimitReached}
-            >
-              <div class="mt-3 shrink-0">
-                <Button
-                  onclick={() => (isCreateAccountDialogVisible = true)}
-                  variant="tertiary"
-                  disabled={isAccountLimitReached}
-                  class="w-full"
-                >
-                  <PlusIcon class="size-5" />
-                  {$t`Add another account`}
-                </Button>
-              </div>
-            </Tooltip>
-          </div>
+      <div class="!min-h-18" in:slide={{ axis: "y", duration: 300 }}>
+        <div class="flex flex-col gap-2 pb-6" in:fade={{ duration: 300 }}>
+          <ul class="contents" aria-label={$t`Choose an account`}>
+            {#each accounts as account (account.account_number[0])}
+              <li class="contents">
+                {@render accountListItem(account)}
+              </li>
+            {/each}
+          </ul>
+          <Tooltip
+            label={$t`Limit reached`}
+            description={$plural(MAX_ACCOUNTS, {
+              one: `You have reached the maximum of # account for a single app.`,
+              other: `You have reached the maximum of # accounts for a single app.`,
+            })}
+            direction="up"
+            align="center"
+            hidden={!isAccountLimitReached}
+          >
+            <div class="mt-3 shrink-0">
+              <Button
+                onclick={() => (isCreateAccountDialogVisible = true)}
+                variant="tertiary"
+                disabled={isAccountLimitReached}
+                class="w-full"
+              >
+                <PlusIcon class="size-5" />
+                {$t`Add another account`}
+              </Button>
+            </div>
+          </Tooltip>
         </div>
-      {/if}
+      </div>
     </div>
   </div>
 {/snippet}
@@ -348,8 +350,21 @@
     {$t`with your Internet Identity`}
   </p>
   <div class="grid">
-    {#if isMultipleAccountsEnabled}
-      {@render accountList()}
+    <!-- Nested if/else conditions breaks transitions, so they've been flattened here-->
+    {#if isMultipleAccountsEnabled && $isAuthenticatedStore && nonNullish(accounts)}
+      {@render accountList(accounts)}
+    {:else if isMultipleAccountsEnabled && $isAuthenticatedStore}
+      <!-- Display the progress ring if loading accounts takes longer than usual.
+      
+           This may happen the first time a user enables multiple accounts, 
+           as authentication might require an update call in case OpenID is used. -->
+      <div
+        class="col-start-1 row-start-1 flex min-h-18 items-center justify-center pb-6"
+        in:fade={{ duration: 100, delay: 300 }}
+        out:fade={{ duration: 100 }}
+      >
+        <ProgressRing class="text-fg-tertiary size-8" />
+      </div>
     {:else}
       {@render continueDefault()}
     {/if}