fix(ceremony): save progress

ceremony/src/lib/components/Ceremony.svelte

@@ -35,7 +35,7 @@ let addressValidState: ValidState = $state("PENDING")
     <H1>Your position: <span class="text-union-accent-500">{contributor.queueState.position}</span></H1>
     <H2>Queue length: <span class="text-union-accent-500">{contributor.queueState.count}</span></H2>
 
-    <!--Todo format time correctly-->
+    <!--Todo format time correctly if we want this, can probably be thousands of minutes?-->
     <H3>Waiting time: <span class="text-union-accent-500">{contributor.queueState.estimatedTime} minutes</span> (est.).
     </H3>
 
@@ -45,13 +45,10 @@ let addressValidState: ValidState = $state("PENDING")
 
   {:else if contributor.state === 'contribute'}
     <H1>Starting contribution...</H1>
-
   {:else if contributor.state === 'contributing'}
     <H1>Contributing...</H1>
-
   {:else if contributor.state === 'verifying'}
     <H1>Verifying your contribution...</H1>
-
   {:else if contributor.state === 'contributed'}
 
     <div class="flex flex-col justify-center items-center gap-4">
@@ -65,7 +62,7 @@ let addressValidState: ValidState = $state("PENDING")
     <Install/>
 
   {:else}
-    <H1>Loading...</H1>
+    <H1>Not able to contribute at this time</H1>
   {/if}
 
 </div>

ceremony/src/lib/components/Join.svelte

@@ -3,17 +3,25 @@ import H1 from "$lib/components/typography/H1.svelte"
 import Button from "$lib/components/Button.svelte"
 import Text from "$lib/components/typography/Text.svelte"
 import { callJoinQueue } from "$lib/supabase"
+import Spinner from "$lib/components/Spinner.svelte";
 
 let code = $state("")
+let loading = $state(false)
 
 async function handleCode() {
+  loading = true
   //Maybe check format etc
   const codeValid = await callJoinQueue(code)
   if (codeValid) {
     console.log("valid")
   }
 }
 
+async function joinWaitlist() {
+  loading = true
+
+}
+
 async function handleWaitlist() {}
 </script>
 
@@ -47,4 +55,4 @@ async function handleWaitlist() {}
 
 <Text>Or</Text>
 
-<Button>Join the waitlist</Button>
+<Button>Join the waitlist <Spinner /></Button>

ceremony/src/lib/stores/state.svelte.ts

@@ -231,6 +231,7 @@ export class ContributorState {
     console.log("Current contributionState:", this.contributionState)
 
     if (this.contributionState === "contribute") {
+
       switch (this.clientState) {
         case "idle":
         case "initializing":
@@ -254,6 +255,7 @@ export class ContributorState {
           this.state = "contribute"
           break
       }
+
     } else if (this.queueState.position !== null) {
       this.state = "inQueue"
     } else if (this.contributionState === "contributed") {

ceremony/src/routes/+page.svelte

@@ -18,9 +18,11 @@ $effect(() => {
 {#if contributor}
   {#if contributor.loggedIn}
     <Ceremony {contributor}/>
+
   {:else if contributor.onWaitlist}
     <H1>Your on the list</H1>
   {:else}
+
     <!--Do this if no code and no waitlist?-->
     <Join />
   {/if}