fix: add loading indicator and disable discard button when sound is b…

…eing deleted (#2283)
inaturalist · Oct 18, 2024 · 19f7a83 · 19f7a83
1 parent 9ba36de
commit 19f7a83
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"