fix: unnecessary flicker when picking document

examples/SampleApp/ios/SampleApp.xcodeproj/project.pbxproj

@@ -646,11 +646,7 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 			};
@@ -728,11 +724,7 @@
 					"-DFOLLY_MOBILE=1",
 					"-DFOLLY_USE_LIBCPP=1",
 				);
-				OTHER_LDFLAGS = (
-					"$(inherited)",
-					"-Wl",
-					"-ld_classic",
-				);
+				OTHER_LDFLAGS = "$(inherited)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;

package/src/contexts/messageInputContext/MessageInputContext.tsx

@@ -587,6 +587,8 @@ export const MessageInputProvider = <
           ),
         );
       } else {
+        const promises: Array<Promise<void>> = [];
+        const newFileUploads: FileUpload[] = [];
         result.assets.forEach((asset) => {
           /**
            * TODO: The current tight coupling of images to the image
@@ -595,8 +597,17 @@ export const MessageInputProvider = <
            * This should be updated alongside allowing image a file
            * uploads together.
            */
-          uploadNewFile(asset);
+          const { isNotSupported, newFile } = createFileUpload(
+            asset,
+            blockedFileExtensionTypes,
+            blockedFileMimeTypes,
+          );
+          newFileUploads.push(newFile);
+          if (!isNotSupported) promises.push(uploadFile({ newFile }));
         });
+        setFileUploads((prevFileUploads) => prevFileUploads.concat(newFileUploads));
+        setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + newFileUploads.length);
+        await Promise.all(promises);
       }
     }
   };
@@ -683,8 +694,6 @@ export const MessageInputProvider = <
     }
   };
 
-  // TODO: Figure out why this is async, as it doesn't await any promise.
-  // eslint-disable-next-line require-await
   const sendMessage = async () => {
     if (sending.current) {
       return;
@@ -743,7 +752,7 @@ export const MessageInputProvider = <
     for (const file of fileUploads) {
       if (enableOfflineSupport) {
         if (file.state === FileState.NOT_SUPPORTED) {
-          return;
+          continue;
         }
         attachments.push(mapFileUploadToAttachment(file));
         continue;
@@ -794,7 +803,10 @@ export const MessageInputProvider = <
       sending.current = false;
     } else {
       try {
-        value.sendMessage({
+        value.clearQuotedMessageState();
+        sending.current = false;
+        resetInput(attachments);
+        await value.sendMessage({
           attachments,
           mentioned_users: uniq(mentionedUsers),
           /** Parent message id - in case of thread */
@@ -804,10 +816,6 @@ export const MessageInputProvider = <
           show_in_channel: sendThreadMessageInChannel || undefined,
           text: prevText,
         } as unknown as StreamMessage<StreamChatGenerics>);
-
-        value.clearQuotedMessageState();
-        sending.current = false;
-        resetInput(attachments);
       } catch (_error) {
         sending.current = false;
         if (value.quotedMessage && typeof value.quotedMessage !== 'boolean') {
@@ -912,8 +920,12 @@ export const MessageInputProvider = <
       fileState: FileStateValue,
       extraData: Partial<UploadType> = {},
     ): React.SetStateAction<UploadType[]> =>
-    (prevUploads: UploadType[]) =>
-      prevUploads.map((prevUpload) => {
+    (prevUploads: UploadType[]) => {
+      const uploadIndex = prevUploads.findIndex((upload) => upload.id === id);
+      if (uploadIndex === -1) {
+        return prevUploads;
+      }
+      return prevUploads.map((prevUpload) => {
         if (prevUpload.id === id) {
           return {
             ...prevUpload,
@@ -923,6 +935,7 @@ export const MessageInputProvider = <
         }
         return prevUpload;
       });
+    };
 
   const handleFileOrImageUploadError = (error: unknown, isImageError: boolean, id: string) => {
     if (isImageError) {
@@ -1061,36 +1074,17 @@ export const MessageInputProvider = <
   };
 
   const uploadNewFile = async (file: File) => {
-    const id: string = generateRandomId();
-
-    const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some(
-      (fileExtensionType: string) => file.name?.includes(fileExtensionType),
-    );
-    const isBlockedFileMimeType: boolean | undefined = blockedFileMimeTypes?.some(
-      (mimeType: string) => file.name?.includes(mimeType),
-    );
-
-    const fileState =
-      isBlockedFileExtension || isBlockedFileMimeType
-        ? FileState.NOT_SUPPORTED
-        : FileState.UPLOADING;
-
-    const newFile: FileUpload = {
-      duration: 0,
+    const { isNotSupported, newFile } = createFileUpload(
       file,
-      id: file.id || id,
-      paused: true,
-      progress: 0,
-      state: fileState,
-    };
+      blockedFileExtensionTypes,
+      blockedFileMimeTypes,
+    );
 
-    await Promise.all([
-      setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile])),
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
-    ]);
+    setFileUploads((prevFileUploads) => prevFileUploads.concat([newFile]));
+    setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1);
 
-    if (!isBlockedFileExtension) {
-      uploadFile({ newFile });
+    if (!isNotSupported) {
+      await uploadFile({ newFile });
     }
   };
 
@@ -1105,10 +1099,9 @@ export const MessageInputProvider = <
       image.uri?.includes(imageExtensionType),
     );
 
-    const imageState =
-      isBlockedImageExtension || isBlockedImageMimeType
-        ? FileState.NOT_SUPPORTED
-        : FileState.UPLOADING;
+    const isNotSupported = isBlockedImageExtension || isBlockedImageMimeType;
+
+    const imageState = isNotSupported ? FileState.NOT_SUPPORTED : FileState.UPLOADING;
 
     const newImage: ImageUpload = {
       file: image,
@@ -1119,13 +1112,11 @@ export const MessageInputProvider = <
       width: image.width,
     };
 
-    await Promise.all([
-      setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage])),
-      setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1),
-    ]);
+    setImageUploads((prevImageUploads) => prevImageUploads.concat([newImage]));
+    setNumberOfUploads((prevNumberOfUploads) => prevNumberOfUploads + 1);
 
-    if (!isBlockedImageExtension) {
-      uploadImage({ newImage });
+    if (!isNotSupported) {
+      await uploadImage({ newImage });
     }
   };
 
@@ -1229,3 +1220,33 @@ export const withMessageInputContext = <
   )}`;
   return WithMessageInputContextComponent;
 };
+
+const createFileUpload = (
+  file: File,
+  blockedFileExtensionTypes: string[] | null | undefined,
+  blockedFileMimeTypes: string[] | null | undefined,
+) => {
+  const id: string = generateRandomId();
+
+  const isBlockedFileExtension: boolean | undefined = blockedFileExtensionTypes?.some(
+    (fileExtensionType: string) => file.name?.includes(fileExtensionType),
+  );
+  const isBlockedFileMimeType: boolean | undefined = blockedFileMimeTypes?.some(
+    (mimeType: string) => file.name?.includes(mimeType),
+  );
+
+  const isNotSupported = !!(isBlockedFileExtension || isBlockedFileMimeType);
+
+  const fileState = isNotSupported ? FileState.NOT_SUPPORTED : FileState.UPLOADING;
+
+  const newFile: FileUpload = {
+    duration: 0,
+    file,
+    id: file.id || id,
+    paused: true,
+    progress: 0,
+    state: fileState,
+  };
+
+  return { isNotSupported, newFile };
+};