fix: defer email subscription state fetching

src/components/MenuAccount.vue

@@ -6,17 +6,8 @@ const props = defineProps<{
 const emit = defineEmits(['switchWallet']);
 const { domain } = useApp();
 const { logout } = useWeb3();
+const { modalEmailOpen } = useModal();
 const router = useRouter();
-const { userState, loadEmailSubscriptions } = useEmailSubscription();
-
-const showModalEmail = ref(false);
-
-onMounted(loadEmailSubscriptions);
-watch(showModalEmail, () => {
-  if (!showModalEmail.value) {
-    loadEmailSubscriptions();
-  }
-});
 
 function handleAction(e) {
   if (e === 'viewProfile')
@@ -29,7 +20,7 @@ function handleAction(e) {
         });
   if (e === 'switchWallet') return emit('switchWallet');
   if (e === 'subscribeEmail') {
-    showModalEmail.value = true;
+    modalEmailOpen.value = true;
     return true;
   }
 
@@ -90,20 +81,6 @@ function handleAction(e) {
   </div>
 
   <teleport to="#modal">
-    <ModalEmailSubscription
-      v-if="userState === 'NOT_SUBSCRIBED'"
-      :open="showModalEmail"
-      @close="showModalEmail = false"
-    />
-    <ModalEmailResend
-      v-else-if="userState === 'UNVERIFIED'"
-      :open="showModalEmail"
-      @close="showModalEmail = false"
-    />
-    <ModalEmailManagement
-      v-else-if="userState === 'VERIFIED'"
-      :open="showModalEmail"
-      @close="showModalEmail = false"
-    />
+    <ModalEmail :open="modalEmailOpen" @close="modalEmailOpen = false" />
   </teleport>
 </template>

src/components/ModalEmail.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+const props = defineProps<{
+  open: boolean;
+}>();
+const emit = defineEmits(['close']);
+
+const { initialized, userState, loadEmailSubscriptions } =
+  useEmailSubscription();
+
+watch(
+  () => props.open,
+  () => {
+    if (
+      (props.open && !initialized.value) ||
+      userState.value === 'UNVERIFIED'
+    ) {
+      loadEmailSubscriptions();
+    }
+  }
+);
+</script>
+
+<template>
+  <BaseModal max-height="510px" :open="open" @close="emit('close')">
+    <template #header>
+      <h3 v-if="userState === 'NOT_SUBSCRIBED'">
+        {{ $t('emailSubscription.title') }}
+      </h3>
+      <h3 v-else-if="userState === 'UNVERIFIED'">
+        {{ $t('emailResend.title') }}
+      </h3>
+      <h3 v-else-if="userState === 'VERIFIED'">
+        {{ $t('emailManagement.title') }}
+      </h3>
+    </template>
+
+    <LoadingRow v-if="!initialized" />
+    <ModalEmailSubscription
+      v-else-if="userState === 'NOT_SUBSCRIBED'"
+      @close="emit('close')"
+    />
+    <ModalEmailResend
+      v-else-if="userState === 'UNVERIFIED'"
+      @close="emit('close')"
+    />
+    <ModalEmailManagement
+      v-else-if="userState === 'VERIFIED'"
+      @close="emit('close')"
+    />
+  </BaseModal>
+</template>

src/components/ModalEmailManagement.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-defineProps<{
-  open: boolean;
-}>();
-
 const emit = defineEmits(['close']);
 
 const { loading, error, clientSubscriptions, updateSubscriptions } =
@@ -32,20 +28,12 @@ const submit = async () => {
 </script>
 
 <template>
-  <BaseModal :open="open" max-height="510px" @close="emit('close')">
-    <template #header>
-      <div class="flex flex-row items-center justify-center">
-        <h3>{{ $t('emailManagement.title') }}</h3>
-      </div>
-    </template>
-
-    <div class="mx-4 mb-4 mt-2 text-center">
-      <p class="text-sm text-skin-text opacity-60">
-        {{ t('emailManagement.subtitle') }}
-      </p>
-    </div>
+  <div class="m-4 flex flex-col gap-4">
+    <p class="text-sm text-skin-text opacity-60">
+      {{ t('emailManagement.subtitle') }}
+    </p>
 
-    <form class="mx-6 my-4 flex flex-col space-y-4" @submit.prevent="submit">
+    <form class="flex flex-col space-y-4" @submit.prevent="submit">
       <TuneSwitch
         :model-value="clientSubscriptions.summary"
         :label="t('emailManagement.optionSummary')"
@@ -67,9 +55,9 @@ const submit = async () => {
         @update:model-value="updateSubscriptionKeys('closedProposal', $event)"
       />
 
-      <TuneButton class="mt-6 w-full" primary type="submit" :loading="loading">
+      <TuneButton class="w-full" primary type="submit" :loading="loading">
         {{ t('emailManagement.updatePreferences') }}
       </TuneButton>
     </form>
-  </BaseModal>
+  </div>
 </template>

src/components/ModalEmailResend.vue

@@ -1,23 +1,13 @@
 <script setup lang="ts">
-defineProps<{
-  open: boolean;
-}>();
 const emit = defineEmits(['close']);
 </script>
 
 <template>
-  <BaseModal :open="open" @close="emit('close')">
-    <template #header>
-      <div class="flex flex-row items-center justify-center">
-        <h3>{{ $t('emailResend.title') }}</h3>
-      </div>
-    </template>
-    <div class="m-4 mb-6 text-center">
-      {{ $t('emailResend.description') }}
+  <div class="m-4 flex flex-col gap-4 text-center">
+    {{ $t('emailResend.description') }}
 
-      <TuneButton class="mt-4 w-full" primary @click="emit('close')">
-        {{ $t('close') }}
-      </TuneButton>
-    </div>
-  </BaseModal>
+    <TuneButton class="w-full" primary @click="emit('close')">
+      {{ $t('close') }}
+    </TuneButton>
+  </div>
 </template>

src/components/ModalEmailSubscription.vue

@@ -1,8 +1,4 @@
 <script setup lang="ts">
-defineProps<{
-  open: boolean;
-}>();
-
 const emit = defineEmits(['close']);
 
 type ModalView = 'SUBSCRIBE' | 'SUCCESS';
@@ -40,19 +36,13 @@ async function submit() {
 </script>
 
 <template>
-  <BaseModal :open="open" @close="close">
-    <template #header>
-      <div class="flex flex-row items-center justify-center">
-        <h3>{{ $t('emailSubscription.title') }}</h3>
-      </div>
-    </template>
-
-    <template v-if="modalView === 'SUBSCRIBE'">
-      <div class="m-4">
+  <template v-if="modalView === 'SUBSCRIBE'">
+    <div class="m-4 flex flex-col gap-4">
+      <p>
         {{ $t('emailSubscription.description') }}
-      </div>
+      </p>
 
-      <form class="m-4" @submit.prevent="submit">
+      <form @submit.prevent="submit">
         <BaseInput
           v-model="email"
           :placeholder="$t('emailSubscription.inputPlaceholder')"
@@ -78,24 +68,23 @@ async function submit() {
           {{ $t('emailSubscription.subscribe') }}
         </TuneButton>
       </form>
-    </template>
-
-    <div v-if="modalView === 'SUCCESS'" class="m-4 text-center">
-      <i-ho-check-circle
-        class="mx-auto my-4 text-center text-[3em] text-green"
-      />
-      <h3>
-        {{ $t('emailSubscription.postSubscribeMessage.successThanks') }}
-      </h3>
-      <p class="mt-3 italic">
-        {{ $t('emailSubscription.postSubscribeMessage.successConfirmation') }}
-      </p>
     </div>
+  </template>
 
-    <template v-if="modalView === 'SUCCESS'" #footer>
+  <template v-if="modalView === 'SUCCESS'">
+    <div class="m-4 gap-4 flex flex-col text-center">
+      <i-ho-check-circle class="mx-auto text-center text-[3em] text-green" />
+      <div>
+        <h3>
+          {{ $t('emailSubscription.postSubscribeMessage.successThanks') }}
+        </h3>
+        <p class="mt-3 italic">
+          {{ $t('emailSubscription.postSubscribeMessage.successConfirmation') }}
+        </p>
+      </div>
       <TuneButton class="w-full" primary @click="close">
         {{ $t('close') }}
       </TuneButton>
-    </template>
-  </BaseModal>
+    </div>
+  </template>
 </template>

src/components/ModalPostVote.vue

@@ -4,7 +4,8 @@ import { ExtendedSpace, Proposal } from '@/helpers/interfaces';
 
 const { shareVote, shareProposalTwitter, shareProposalHey } = useSharing();
 const { web3Account } = useWeb3();
-const { userState } = useEmailSubscription();
+const { userState, loadEmailSubscriptions, initialized } =
+  useEmailSubscription();
 
 const props = defineProps<{
   open: boolean;
@@ -34,6 +35,12 @@ function share(shareTo: 'twitter' | 'hey') {
     choices: getChoiceString(props.proposal, props.selectedChoices)
   });
 }
+
+onMounted(() => {
+  if (!initialized.value) {
+    loadEmailSubscriptions();
+  }
+});
 </script>
 
 <template>
@@ -87,7 +94,7 @@ function share(shareTo: 'twitter' | 'hey') {
         </TuneButton>
 
         <TuneButton
-          v-if="userState !== 'VERIFIED'"
+          v-if="userState !== 'VERIFIED' && initialized"
           class="flex !h-[42px] w-full items-center justify-center gap-2"
           @click="subscribeEmail"
         >

src/components/SpaceProposalPage.vue

@@ -23,14 +23,14 @@ useMeta({
 
 const route = useRoute();
 const { web3, web3Account } = useWeb3();
+const { modalEmailOpen } = useModal();
 const { isMessageVisible, setMessageVisibility } = useFlaggedMessageStatus(
   route.params.id as string
 );
 
 const proposalId: string = route.params.id as string;
 
 const modalOpen = ref(false);
-const modalEmailSubscriptionOpen = ref(false);
 const selectedChoices = ref<any>(null);
 const loadedResults = ref(false);
 const results = ref<Results | null>(null);
@@ -240,12 +240,7 @@ onMounted(() => setMessageVisibility(props.proposal.flagged));
       :selected-choices="selectedChoices"
       :waiting-for-signers="waitingForSigners"
       @close="isModalPostVoteOpen = false"
-      @subscribe-email="modalEmailSubscriptionOpen = true"
-    />
-    <ModalEmailSubscription
-      :open="modalEmailSubscriptionOpen"
-      :address="web3Account"
-      @close="modalEmailSubscriptionOpen = false"
+      @subscribe-email="modalEmailOpen = true"
     />
   </teleport>
 </template>

src/composables/useEmailSubscription.ts

@@ -14,6 +14,7 @@ function useEmailSubscriptionComposable() {
 
   const userState = ref<SubscriptionStatus>('NOT_SUBSCRIBED');
   const error = ref('');
+  const initialized = ref(false);
   const loading = ref(false);
   const apiSubscriptions = ref<SubscriptionType[]>([]);
 
@@ -50,6 +51,7 @@ function useEmailSubscriptionComposable() {
     userState.value = usrState;
     apiSubscriptions.value = subscriptions || [];
     loading.value = false;
+    initialized.value = true;
   };
 
   const subscribe = async (email: string) => {
@@ -88,7 +90,8 @@ function useEmailSubscriptionComposable() {
     subscribe,
     updateSubscriptions,
     loadEmailSubscriptions,
-    loading
+    loading,
+    initialized
   };
 }
 

src/composables/useModal.ts

@@ -1,6 +1,7 @@
 const modalAccountOpen = ref(false);
 const isModalPostVoteOpen = ref(false);
+const modalEmailOpen = ref(false);
 
 export function useModal() {
-  return { modalAccountOpen, isModalPostVoteOpen };
+  return { modalAccountOpen, isModalPostVoteOpen, modalEmailOpen };
 }