Improve registration flow

src/Loading.svelte

@@ -2,6 +2,7 @@
   export let small = false;
   export let color = "secondary";
   export let center = false;
+  export let fadeIn = false;
 </script>
 
 <style>
@@ -76,7 +77,7 @@
   }
 </style>
 
-<div class="spinner fade-in" class:small class:center>
+<div class="spinner" class:fade-in={fadeIn} class:small class:center>
   <div class="bounce1" style="background-color: var(--color-{color})"></div>
   <div class="bounce2" style="background-color: var(--color-{color})"></div>
   <div class="bounce3" style="background-color: var(--color-{color})"></div>

src/base/orgs/View.svelte

@@ -86,7 +86,7 @@
 </style>
 
 {#await Org.get(address, config)}
-  <Loading />
+  <Loading fadeIn />
 {:then org}
   {#if org}
     <main>

src/base/registrations/Index.svelte

@@ -6,29 +6,12 @@
   import Modal from '@app/Modal.svelte';
   import DomainInput from '@app/ens/DomainInput.svelte';
 
-  enum State {
-    Idle,
-    CheckingAvailability,
-    NameAvailable,
-    NameUnavailable,
-  }
-
   export let config: Config;
 
-  let state = State.Idle;
-  let inputValue: string;
+  let label: string;
 
-  function checkAvailability(name: string) {
-    state = State.CheckingAvailability;
-
-    registrar(config).available(name).then((isAvailable: boolean) => {
-      if (isAvailable) {
-        state = State.NameAvailable;
-        navigate(`/registrations/${name}/form`);
-      } else {
-        state = State.NameUnavailable;
-      }
-    });
+  function register() {
+    navigate(`/registrations/${label}/form`);
   }
 </script>
 
@@ -57,47 +40,21 @@
 </style>
 
 <main>
-  {#if state === State.NameUnavailable}
-    <Modal floating>
-      <span slot="title">
-        {inputValue}.{config.registrar.domain}
-      </span>
-      <span slot="body">
-        The name <span class="highlight">{inputValue}</span> is not available for registration.
-      </span>
-      <span slot="actions">
-        <button on:click={() => state = State.Idle} class="secondary">
-          Back
-        </button>
-      </span>
-    </Modal>
-  {/if}
-
   <div class="input-caption">
     Register a <strong>{config.registrar.domain}</strong> name
   </div>
   <div class="input-main">
     <span class="name">
       <DomainInput
-        bind:value={inputValue}
+        bind:value={label}
         autofocus
         placeholder=""
-        disabled={state === State.CheckingAvailability}
         root={config.registrar.domain}
       />
     </span>
-    {#if !inputValue}
-      <button disabled class="primary register">
-        Check
-      </button>
-    {:else if state === State.CheckingAvailability}
-      <button disabled class="primary register" data-waiting>
-        Check
-      </button>
-    {:else}
-      <button on:click={() => checkAvailability(inputValue)} class="primary register">
-        Check
-      </button>
-    {/if}
+
+    <button disabled={!label} class="primary register" on:click={register}>
+      Check
+    </button>
   </div>
 </main>

src/base/registrations/New.svelte

@@ -1,6 +1,7 @@
 <script lang="typescript">
   // TODO: Should check for availability here, before saying a name is available.
   // Perhaps the availability check should be moved out of the 'submit' step then.
+  import { onMount } from 'svelte';
   import { navigate } from 'svelte-routing';
   import { formatAddress } from '@app/utils';
   import { session } from '@app/session';
@@ -8,12 +9,13 @@
 
   import Connect from '@app/Connect.svelte';
   import Modal from '@app/Modal.svelte';
+  import Loading from '@app/Loading.svelte';
 
   import { registrar } from './registrar';
 
   enum State {
-    Initial,
     CheckingAvailability,
+    NameAvailable,
     NameUnavailable,
   }
 
@@ -21,32 +23,31 @@
   export let subdomain: string;
   export let owner: string | null;
 
-  let state = State.Initial;
+  let state = State.CheckingAvailability;
   $: registrationOwner = owner || ($session && $session.address);
 
-  async function begin() {
-    state = State.CheckingAvailability;
+  function begin() {
+    navigate(`/registrations/${subdomain}/submit?${
+      registrationOwner ? new URLSearchParams({ owner: registrationOwner }) : ''
+    }`);
+  }
 
+  onMount(async () => {
     if (await registrar(config).available(subdomain)) {
-      navigate(`/registrations/${subdomain}/submit?${
-        registrationOwner ? new URLSearchParams({ owner: registrationOwner }) : ''
-      }`);
+      state = State.NameAvailable;
     } else {
       state = State.NameUnavailable;
     }
-  }
+  });
 </script>
 
-<style>
-</style>
-
 <Modal>
   <span slot="title">
     {subdomain}.{config.registrar.domain}
   </span>
 
   <span slot="body">
-    {#if state === State.Initial || state === State.CheckingAvailability}
+    {#if state === State.NameAvailable}
       {#if registrationOwner}
         The name <span class="highlight">{subdomain}</span> is available for registration
         under account <span class="highlight">{formatAddress(registrationOwner)}</span>.
@@ -55,19 +56,13 @@
       {/if}
     {:else if state === State.NameUnavailable}
       The name <span class="highlight">{subdomain}</span> is not available for registration.
+    {:else if state === State.CheckingAvailability}
+      <Loading small center />
     {/if}
   </span>
 
   <span slot="actions">
-    {#if state === State.CheckingAvailability}
-      <button disabled class="primary register">
-        Checking availability...
-      </button>
-    {:else if state === State.NameUnavailable}
-      <button on:click={() => navigate("/registrations")} class="">
-        Back
-      </button>
-    {:else}
+    {#if state === State.NameAvailable}
       {#if $session}
         <button on:click={begin} class="primary register">
           Begin registration &rarr;
@@ -79,6 +74,10 @@
       <button on:click={() => navigate("/registrations")} class="text">
         Cancel
       </button>
+    {:else if state === State.NameUnavailable}
+      <button on:click={() => navigate("/registrations")} class="">
+        Back
+      </button>
     {/if}
   </span>
 </Modal>

src/base/registrations/View.svelte

@@ -92,7 +92,7 @@
 </style>
 
 {#await loadRegistration}
-  <Loading />
+  <Loading fadeIn />
 {:then registration}
   {#if registration}
     {#if state === State.Idle}