From 19f7a83750b6221faa39e78c3bc97cddd53de293 Mon Sep 17 00:00:00 2001
From: Angie <angie@inaturalist.org>
Date: Fri, 18 Oct 2024 11:21:51 -0700
Subject: [PATCH] fix: add loading indicator and disable discard button when
 sound is being deleted (#2283)

---
 src/components/MediaViewer/MediaViewer.js               | 5 ++++-
 src/components/MediaViewer/MediaViewerModal.js          | 3 +++
 src/components/ObsEdit/EvidenceList.js                  | 7 ++++++-
 src/components/SharedComponents/Buttons/Button.tsx      | 2 +-
 src/components/SharedComponents/Sheets/WarningSheet.tsx | 4 ++++
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/MediaViewer/MediaViewer.js b/src/components/MediaViewer/MediaViewer.js
index 4a53bfc8bf..fe36bcff17 100644
--- a/src/components/MediaViewer/MediaViewer.js
+++ b/src/components/MediaViewer/MediaViewer.js
@@ -23,6 +23,7 @@ import MediaViewerHeader from "./MediaViewerHeader";
 type Props = {
   autoPlaySound?: boolean, // automatically start playing a sound when it is visible
   editable?: boolean,
+  deleting?: boolean,
   // Optional component to use as the header
   header?: Function,
   onClose?: Function,
@@ -44,6 +45,7 @@ type Props = {
 const MediaViewer = ( {
   autoPlaySound,
   editable,
+  deleting,
   header,
   onClose = ( ) => undefined,
   onDeletePhoto,
@@ -135,9 +137,10 @@ const MediaViewer = ( {
         isLargeScreen={isLargeScreen}
         selectedMediaIndex={selectedMediaIndex}
       />
-      {mediaToDelete && (
+      {( mediaToDelete || deleting ) && (
         <WarningSheet
           onPressClose={( ) => setMediaToDelete( null )}
+          loading={deleting}
           confirm={confirmDelete}
           headerText={t( "DISCARD-MEDIA--question" )}
           buttonText={t( "DISCARD" )}
diff --git a/src/components/MediaViewer/MediaViewerModal.js b/src/components/MediaViewer/MediaViewerModal.js
index 80fb3a042a..42af2d57d7 100644
--- a/src/components/MediaViewer/MediaViewerModal.js
+++ b/src/components/MediaViewer/MediaViewerModal.js
@@ -8,6 +8,7 @@ import React from "react";
 type Props = {
   autoPlaySound?: boolean, // automatically start playing a sound when it is visible
   editable?: boolean,
+  deleting?: boolean,
   // Optional component to use as the header
   header?: Function,
   onClose?: Function,
@@ -30,6 +31,7 @@ type Props = {
 const MediaViewerModal = ( {
   autoPlaySound,
   editable,
+  deleting,
   header,
   onClose = ( ) => undefined,
   onDeletePhoto,
@@ -48,6 +50,7 @@ const MediaViewerModal = ( {
       <MediaViewer
         autoPlaySound={autoPlaySound}
         editable={editable}
+        deleting={deleting}
         header={header}
         onClose={onClose}
         onDeletePhoto={onDeletePhoto}
diff --git a/src/components/ObsEdit/EvidenceList.js b/src/components/ObsEdit/EvidenceList.js
index ce0ce0c0be..0073282e5a 100644
--- a/src/components/ObsEdit/EvidenceList.js
+++ b/src/components/ObsEdit/EvidenceList.js
@@ -49,6 +49,7 @@ const EvidenceList = ( {
   const realm = useRealm( );
   const { t } = useTranslation( );
   const [selectedMediaUri, setSelectedMediaUri]: [string | null, Function] = useState( null );
+  const [deleting, setDeleting] = useState( false );
   const imageClass = "h-16 w-16 justify-center mx-1.5 rounded-lg";
 
   const observationPhotos = useMemo(
@@ -165,6 +166,7 @@ const EvidenceList = ( {
     } else {
       setSelectedMediaUri( mediaUris[mediaUris.length - 1] );
     }
+    setDeleting( false );
   }, [mediaUris, setSelectedMediaUri] );
 
   const deleteObservationSoundMutation = useAuthenticatedMutation(
@@ -188,12 +190,14 @@ const EvidenceList = ( {
       );
       afterMediaDeleted( );
     }
+    setDeleting( true );
     // If sound was synced, delete the remote copy immediately and then remove
     // the local
     if ( obsSound?.id ) {
       deleteObservationSoundMutation.mutate( { uuid: obsSound.uuid }, {
         onSuccess: removeLocalSound,
         onError: deleteRemoteObservationSoundError => {
+          setDeleting( false );
           logger.error(
             "[EvidenceList.js] failed to delete remote observation sound: ",
             deleteRemoteObservationSoundError
@@ -243,11 +247,12 @@ const EvidenceList = ( {
       {evidenceList}
       <MediaViewerModal
         editable
+        deleting={deleting}
         onClose={( ) => setSelectedMediaUri( null )}
         onDeletePhoto={onDeletePhoto}
         onDeleteSound={onDeleteSound}
         photos={observationPhotos.map( obsPhoto => obsPhoto.photo )}
-        showModal={!!selectedMediaUri}
+        showModal={!!selectedMediaUri || deleting}
         sounds={observationSounds.map( obsSound => obsSound.sound )}
         uri={selectedMediaUri}
       />
diff --git a/src/components/SharedComponents/Buttons/Button.tsx b/src/components/SharedComponents/Buttons/Button.tsx
index 14124e603d..f66b0ef5ef 100644
--- a/src/components/SharedComponents/Buttons/Button.tsx
+++ b/src/components/SharedComponents/Buttons/Button.tsx
@@ -201,7 +201,7 @@ const Button = ( {
       {loading && (
         <ActivityIndicator
           size={18}
-          className="mr-2"
+          className="mr-3 absolute right-0"
           color={!isNeutral
             ? activityIndicatorColor( {
               isPrimary, isWarning, isFocus
diff --git a/src/components/SharedComponents/Sheets/WarningSheet.tsx b/src/components/SharedComponents/Sheets/WarningSheet.tsx
index 8d13bdd832..c15b1f82d2 100644
--- a/src/components/SharedComponents/Sheets/WarningSheet.tsx
+++ b/src/components/SharedComponents/Sheets/WarningSheet.tsx
@@ -14,6 +14,7 @@ interface Props {
   headerText: string;
   hidden?: boolean;
   insideModal?: boolean;
+  loading: boolean;
   onPressClose: () => void;
   secondButtonText?: string;
   testID?: string;
@@ -28,6 +29,7 @@ const WarningSheet = ( {
   headerText,
   hidden,
   insideModal,
+  loading,
   onPressClose,
   secondButtonText,
   testID,
@@ -50,6 +52,8 @@ const WarningSheet = ( {
         ) }
         <Button
           onPress={confirm}
+          loading={loading}
+          disabled={loading}
           text={buttonText}
           level={buttonType || "warning"}
           className="grow ml-3"