选中媒体后，增加处理中的状态显示

components/MediaPicker/index.jsx

@@ -1,7 +1,13 @@
-import { View, TouchableOpacity, Image } from "react-native";
+import {
+  View,
+  TouchableOpacity,
+  Image,
+  ActivityIndicator,
+  Text,
+} from "react-native";
 import React, { useState, useEffect, useCallback } from "react";
 import { useTailwind } from "tailwind-rn";
-import { Icon } from "@rneui/themed";
+import { Icon, Overlay } from "@rneui/themed";
 import Toast from "react-native-toast-message";
 import { DraggableGrid } from "react-native-draggable-grid";
 import { useImageViewer } from "../../context/ImageViewProvider";
@@ -32,6 +38,8 @@ export default function MediaPicker({
   const [showVideo, setShowVideo] = useState(false);
   const [videoUrl, setVideoUrl] = useState("");
 
+  const [isOverlayVisible, setIsOverlayVisible] = useState(false);
+
   //为视频生成封面
   const generateThumbnail = useCallback(async (uri) => {
     try {
@@ -60,24 +68,28 @@ export default function MediaPicker({
     });
 
     if (!result.canceled) {
-      for (let i = 0; i < result.assets.length; i++) {
-        if (result.assets[i].duration > 0) {
-          const videoCover = await generateThumbnail(result.assets[i].uri);
-          result.assets[i].cover = videoCover.uri;
-        }
-      }
       setNewAssets(result.assets);
     }
   };
 
   //当newAssets改变的时候添加新数据到assets
   useEffect(() => {
-    const temAssets = newAssets.map((item) => ({
-      ...item,
-      key: Date.now().toString(36) + Math.random().toString(36),
-    }));
-    set_Assets([..._assets, ...temAssets]);
-    setAssets([..._assets, ...temAssets]);
+    const handleAssets = async () => {
+      let temAssets = newAssets;
+      for (let i = 0; i < temAssets.length; i++) {
+        temAssets[i].key = Date.now().toString(36) + Math.random().toString(36);
+        if (temAssets[i].duration > 0) {
+          const videoCover = await generateThumbnail(temAssets[i].uri);
+          temAssets[i].cover = videoCover.uri;
+        }
+      }
+      set_Assets([..._assets, ...temAssets]);
+      setAssets([..._assets, ...temAssets]);
+      setIsOverlayVisible(false);
+    };
+    if (newAssets.length === 0) return;
+    setIsOverlayVisible(true);
+    handleAssets();
   }, [newAssets]);
 
   //加号选择器
@@ -186,6 +198,20 @@ export default function MediaPicker({
         }}
       />
       <Picker />
+      <Overlay
+        isVisible={isOverlayVisible}
+        backdropStyle={tailwind("bg-[#00000080]")}
+        overlayStyle={tailwind("bg-[#17161A] p-4")}
+      >
+        <ActivityIndicator size="large" />
+        <Text
+          style={tailwind(
+            "mt-2 text-center text-[#FFFFFF40] text-sm font-bold"
+          )}
+        >
+          正在处理
+        </Text>
+      </Overlay>
       <VideoModal
         visible={showVideo}
         setVisible={setShowVideo}