diff --git a/ts/components/dialog/EditProfilePictureModal.tsx b/ts/components/dialog/EditProfilePictureModal.tsx index 02146e031..a64983377 100644 --- a/ts/components/dialog/EditProfilePictureModal.tsx +++ b/ts/components/dialog/EditProfilePictureModal.tsx @@ -141,6 +141,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo const ourAvatarIsUploading = useOurAvatarIsUploading(); const ourAvatarUploadFailed = useOurAvatarUploadFailed(); const sogsAvatarIsUploading = useAvatarOfRoomIsUploading(conversationId); + const [isProcessing, setIsProcessing] = useState(false); const [newAvatarObjectUrl, setNewAvatarObjectUrl] = useState(avatarPath); const [isNewAvatarAnimated, setIsNewAvatarAnimated] = useState(false); @@ -169,7 +170,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo const isPublic = useIsPublic(conversationId); const handleAvatarClick = async () => { - const res = await pickFileForAvatar(); + const res = await pickFileForAvatar(setIsProcessing); if (!res) { window.log.error('Failed to pick avatar'); @@ -210,7 +211,8 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo await triggerUploadProfileAvatar(newAvatarObjectUrl, conversationId, dispatch); }; - const loading = ourAvatarIsUploading || groupAvatarChangePending || sogsAvatarIsUploading; + const loading = + ourAvatarIsUploading || groupAvatarChangePending || sogsAvatarIsUploading || isProcessing; const newAvatarLoaded = newAvatarObjectUrl !== avatarPath; @@ -328,7 +330,7 @@ export const EditProfilePictureModal = ({ conversationId }: EditProfilePictureMo {loading ? ( <> - {isMe ? : null} + {isMe && !isProcessing ? : null} ) : ( diff --git a/ts/types/attachments/VisualAttachment.ts b/ts/types/attachments/VisualAttachment.ts index b641eca9f..ef58e5b41 100644 --- a/ts/types/attachments/VisualAttachment.ts +++ b/ts/types/attachments/VisualAttachment.ts @@ -227,10 +227,13 @@ async function pickFileForTestIntegration() { /** * Shows the system file picker for images, scale the image down for avatar/opengroup measurements and return the blob objectURL on success */ -export async function pickFileForAvatar(): Promise { +export async function pickFileForAvatar( + processingCb: (isProcessing: boolean) => void +): Promise { const file = isTestIntegration() ? await pickFileForTestIntegration() : await pickFileForReal(); try { + processingCb(true); const arrayBuffer = await file.arrayBuffer(); // pickFileForAvatar is only used for avatars we want to be able to reupload (ourselves or 03-groups) const processed = await processAvatarData(arrayBuffer, true); @@ -244,5 +247,7 @@ export async function pickFileForAvatar(): Promise