Delay zapping after the animation has completed

src/components/CustomZap/CustomZap.tsx

@@ -11,6 +11,7 @@ import { PrimalNote, PrimalUser, ZapOption } from '../../types/primal';
 import { debounce } from '../../utils';
 import ButtonPrimary from '../Buttons/ButtonPrimary';
 import Modal from '../Modal/Modal';
+import { lottieDuration } from '../Note/NoteFooter/NoteFooter';
 import TextInput from '../TextInput/TextInput';
 import { useToastContext } from '../Toaster/Toaster';
 
@@ -92,27 +93,39 @@ const CustomZap: Component<{
     if (account?.hasPublicKey()) {
       props.onConfirm(selectedValue());
 
-      let success = false;
+      const note = props.note;
 
-      if (props.note) {
-        success = await zapNote(
-          props.note,
+      if (note) {
+        setTimeout(async () => {
+          const success = await zapNote(
+            note,
             account.publicKey,
             selectedValue().amount || 0,
             comment(),
             account.relays,
           );
+
+          handleZap(success);
+        }, lottieDuration());
+        return;
       }
-      else if (props.profile) {
-        success = await zapProfile(
+
+      if (props.profile) {
+        const success = await zapProfile(
           props.profile,
           account.publicKey,
           selectedValue().amount || 0,
           comment(),
           account.relays,
         );
-      }
 
+        handleZap(success);
+        return;
+      }
+    }
+  };
+
+  const handleZap = (success = false) => {
     if (success) {
       props.onSuccess(selectedValue());
       return;
@@ -122,8 +135,7 @@ const CustomZap: Component<{
       intl.formatMessage(toastZapFail),
     );
 
-      props.onFail(selectedValue())
-    }
+    props.onFail(selectedValue());
   };
 
   return (

src/components/Note/NoteFooter/NoteFooter.tsx

@@ -23,6 +23,8 @@ import { NoteFooterState } from '../Note';
 import { SetStoreFunction } from 'solid-js/store';
 import BookmarkNote from '../../BookmarkNote/BookmarkNote';
 
+export const lottieDuration = () => zapMD.op * 1_000 / zapMD.fr;
+
 const NoteFooter: Component<{
   note: PrimalNote,
   wide?: boolean,
@@ -269,6 +271,8 @@ const NoteFooter: Component<{
       props.updateState('satsZapped', (z) => z + amount);
     });
 
+
+    setTimeout(async () => {
       const success = await zapNote(props.note, account.publicKey, amount, message, account.relays);
 
       props.updateState('isZapping', () => false);
@@ -292,6 +296,8 @@ const NoteFooter: Component<{
         amount,
         message,
       });
+    }, lottieDuration());
+
   }
 
   const buttonTypeClasses: Record<string, string> = {

src/pages/Profile.tsx

@@ -488,15 +488,18 @@ const Profile: Component = () => {
     },
     onSuccess: (zapOption: ZapOption) => {
       app?.actions.closeCustomZapModal();
+      app?.actions.resetCustomZap();
       toaster?.sendSuccess(intl.formatMessage(toastZapProfile, {
         name: authorName(profile?.userProfile)
       }))
     },
     onFail: (zapOption: ZapOption) => {
       app?.actions.closeCustomZapModal();
+      app?.actions.resetCustomZap();
     },
     onCancel: (zapOption: ZapOption) => {
       app?.actions.closeCustomZapModal();
+      app?.actions.resetCustomZap();
     },
   });