Merge branch 'master' into tma954-video-trimming-component

1 files changed, 5 insertions, 1 deletions

diff --git a/src/components/comments/ZoomInCropper.tsx b/src/components/comments/ZoomInCropper.tsx
index 8563288e..b4333cbb 100644
--- a/src/components/comments/ZoomInCropper.tsx
+++ b/src/components/comments/ZoomInCropper.tsx
@@ -14,7 +14,7 @@ import {
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
 } from '../../utils';
-import {TaggSquareButton} from '../common';
+import {TaggSquareButton, TaggLoadingIndicator} from '../common';
 import ReactNativeZoomableView from '@dudigital/react-native-zoomable-view/src/ReactNativeZoomableView';
 import {TrimmerPlayer} from '../moments/trimmer';
 
@@ -37,6 +37,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
   // width and height of video, if video
   const [origDimensions, setOrigDimensions] = useState<number[]>([0, 0]);
   const vidRef = useRef<View>(null);
+  const [cropLoading, setCropLoading] = useState<boolean>(false);
 
   // Stores the coordinates of the cropped image
   const [x0, setX0] = useState<number>();
@@ -146,12 +147,14 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
           cropHeight: origDimensions[1],
         }));
       }
+      setCropLoading(true);
       trimVideo(
         media.uri,
         (trimmedURL: string) =>
           cropVideo(
             trimmedURL,
             (croppedURL: string) => {
+              setCropLoading(false);
               navigation.navigate('CaptionScreen', {
                 screenType,
                 media: {
@@ -270,6 +273,7 @@ export const ZoomInCropper: React.FC<ZoomInCropperProps> = ({
 
   return (
     <View style={styles.container}>
+      {cropLoading && <TaggLoadingIndicator fullscreen />}
       <TouchableOpacity
         style={styles.closeButton}
         onPress={() => navigation.goBack()}>