feat(iOS): async image loading (#318)

IvanIhnatsiuk · szydlovsky · web-flow · commit 929a4c1a46a4 · 2025-12-17T17:12:06.000+01:00
# Summary Currently, all images on iOS are loaded in sync way. It fully blocks the main thread and lets's say if we have a large image user has to wait until this image is loaded. The best approach for images is to always load them asynchronously. If it's a local image -> it will be immediately loaded, it won't block the main thread. Additionally, I added the MediaAttachment class that implements the abstract presentation of all attachments. So, if in the future if you would like to add video/block image attachments, it would be easier to extend from this class ## Test Plan Test case 1: 1. Insert any image manually Test case 2: 1. set the initial html like: ``` <html> <p><img src="https://picsum.photos/id/1/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/2/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/3/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/4/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/5/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/6/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/7/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/8/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/9/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/10/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/11/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/12/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/13/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/14/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/15/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/16/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/17/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/18/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/19/200/200" width="200.000000" height="200.000000"/></p> <p><img src="https://picsum.photos/id/20/200/200" width="200.000000" height="200.000000"/></p> </html> ``` ## Screenshots / Videos ### Before: https://github.com/user-attachments/assets/f2a60c27-6d1a-4cd8-ba56-b44d2f9813be ### After: https://github.com/user-attachments/assets/837aa5c9-aa35-49c7-ada2-a18b9b4116da https://github.com/user-attachments/assets/1c32ccc6-fc5a-4caa-8225-5770122e502c Include any visual proof that helps reviewers understand the change — UI updates, bug reproduction or the result of the fix. ## Compatibility | OS | Implemented | | ------- | :---------: | | iOS | ✅ | | Android | ❌ | --------- Co-authored-by: Mikołaj Szydłowski <9szydlowski9@gmail.com>
diff --git a/ios/EnrichedTextInputView.h b/ios/EnrichedTextInputView.h
@@ -3,6 +3,7 @@
 #import "InputConfig.h"
 #import "InputParser.h"
 #import "InputTextView.h"
+#import "MediaAttachment.h"
 #import <React/RCTViewComponentView.h>
 #import <UIKit/UIKit.h>
 
@@ -11,7 +12,8 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
-@interface EnrichedTextInputView : RCTViewComponentView {
+@interface EnrichedTextInputView
+    : RCTViewComponentView <MediaAttachmentDelegate> {
 @public
   InputTextView *textView;
 @public
diff --git a/ios/EnrichedTextInputView.mm b/ios/EnrichedTextInputView.mm
@@ -1558,4 +1558,31 @@ - (void)textViewDidChange:(UITextView *)textView {
   [self anyTextMayHaveBeenModified];
 }
 
+// MARK: - Media attachments delegate
+
+- (void)mediaAttachmentDidUpdate:(NSTextAttachment *)attachment {
+  NSTextStorage *storage = textView.textStorage;
+  NSRange fullRange = NSMakeRange(0, storage.length);
+
+  __block NSRange foundRange = NSMakeRange(NSNotFound, 0);
+
+  [storage enumerateAttribute:NSAttachmentAttributeName
+                      inRange:fullRange
+                      options:0
+                   usingBlock:^(id value, NSRange range, BOOL *stop) {
+                     if (value == attachment) {
+                       foundRange = range;
+                       *stop = YES;
+                     }
+                   }];
+
+  if (foundRange.location == NSNotFound) {
+    return;
+  }
+
+  [storage edited:NSTextStorageEditedAttributes
+               range:foundRange
+      changeInLength:0];
+}
+
 @end
diff --git a/ios/attachments/ImageAttachment.h b/ios/attachments/ImageAttachment.h
@@ -0,0 +1,10 @@
+#import "ImageData.h"
+#import "MediaAttachment.h"
+
+@interface ImageAttachment : MediaAttachment
+
+@property(nonatomic, strong) ImageData *imageData;
+
+- (instancetype)initWithImageData:(ImageData *)data;
+
+@end
diff --git a/ios/attachments/ImageAttachment.mm b/ios/attachments/ImageAttachment.mm
@@ -0,0 +1,34 @@
+#import "ImageAttachment.h"
+
+@implementation ImageAttachment
+
+- (instancetype)initWithImageData:(ImageData *)data {
+  self = [super initWithURI:data.uri width:data.width height:data.height];
+  if (!self)
+    return nil;
+
+  _imageData = data;
+  self.image = [UIImage new];
+
+  [self loadAsync];
+  return self;
+}
+
+- (void)loadAsync {
+  NSURL *url = [NSURL URLWithString:self.uri];
+  if (!url)
+    return;
+
+  dispatch_async(dispatch_get_global_queue(QOS_CLASS_USER_INITIATED, 0), ^{
+    NSData *bytes = [NSData dataWithContentsOfURL:url];
+    UIImage *img = bytes ? [UIImage imageWithData:bytes]
+                         : [UIImage systemImageNamed:@"file"];
+
+    dispatch_async(dispatch_get_main_queue(), ^{
+      self.image = img;
+      [self notifyUpdate];
+    });
+  });
+}
+
+@end
diff --git a/ios/attachments/MediaAttachment.h b/ios/attachments/MediaAttachment.h
@@ -0,0 +1,23 @@
+#import <UIKit/UIKit.h>
+
+@class MediaAttachment;
+
+@protocol MediaAttachmentDelegate <NSObject>
+- (void)mediaAttachmentDidUpdate:(MediaAttachment *)attachment;
+@end
+
+@interface MediaAttachment : NSTextAttachment
+
+@property(nonatomic, weak) id<MediaAttachmentDelegate> delegate;
+@property(nonatomic, strong) NSString *uri;
+@property(nonatomic, assign) CGFloat width;
+@property(nonatomic, assign) CGFloat height;
+
+- (instancetype)initWithURI:(NSString *)uri
+                      width:(CGFloat)width
+                     height:(CGFloat)height;
+
+- (void)loadAsync;
+- (void)notifyUpdate;
+
+@end
diff --git a/ios/attachments/MediaAttachment.mm b/ios/attachments/MediaAttachment.mm
@@ -0,0 +1,31 @@
+#import "MediaAttachment.h"
+
+@implementation MediaAttachment
+
+- (instancetype)initWithURI:(NSString *)uri
+                      width:(CGFloat)width
+                     height:(CGFloat)height {
+  self = [super init];
+  if (!self)
+    return nil;
+
+  _uri = uri;
+  _width = width;
+  _height = height;
+
+  self.bounds = CGRectMake(0, 0, width, height);
+
+  return self;
+}
+
+- (void)loadAsync {
+  // no-op for base
+}
+
+- (void)notifyUpdate {
+  if ([self.delegate respondsToSelector:@selector(mediaAttachmentDidUpdate:)]) {
+    [self.delegate mediaAttachmentDidUpdate:self];
+  }
+}
+
+@end
diff --git a/ios/styles/ImageStyle.mm b/ios/styles/ImageStyle.mm
@@ -1,4 +1,6 @@
 #import "EnrichedTextInputView.h"
+#import "ImageAttachment.h"
+#import "MediaAttachment.h"
 #import "OccurenceUtils.h"
 #import "StyleHeaders.h"
 #import "TextInsertionUtils.h"
@@ -115,27 +117,28 @@ - (ImageData *)getImageDataAt:(NSUInteger)location {
 - (void)addImageAtRange:(NSRange)range
               imageData:(ImageData *)imageData
           withSelection:(BOOL)withSelection {
-  UIImage *img = [self prepareImageFromUri:imageData.uri];
+  if (!imageData)
+    return;
 
-  NSDictionary *attributes = [@{
-    NSAttachmentAttributeName : [self prepareImageAttachement:img
-                                                        width:imageData.width
-                                                       height:imageData.height],
-    ImageAttributeName : imageData,
-  } mutableCopy];
+  ImageAttachment *attachment =
+      [[ImageAttachment alloc] initWithImageData:imageData];
+  attachment.delegate = _input;
+
+  NSDictionary *attributes =
+      @{NSAttachmentAttributeName : attachment, ImageAttributeName : imageData};
 
   // Use the Object Replacement Character for Image.
   // This tells TextKit "something non-text goes here".
-  NSString *imagePlaceholder = @"\uFFFC";
+  NSString *placeholderChar = @"\uFFFC";
 
   if (range.length == 0) {
-    [TextInsertionUtils insertText:imagePlaceholder
+    [TextInsertionUtils insertText:placeholderChar
                                 at:range.location
               additionalAttributes:attributes
                              input:_input
                      withSelection:withSelection];
   } else {
-    [TextInsertionUtils replaceText:imagePlaceholder
+    [TextInsertionUtils replaceText:placeholderChar
                                  at:range
                additionalAttributes:attributes
                               input:_input
@@ -154,23 +157,4 @@ - (void)addImage:(NSString *)uri width:(CGFloat)width height:(CGFloat)height {
           withSelection:YES];
 }
 
-- (NSTextAttachment *)prepareImageAttachement:(UIImage *)image
-                                        width:(CGFloat)width
-                                       height:(CGFloat)height {
-
-  NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
-  attachment.image = image;
-  attachment.bounds = CGRectMake(0, 0, width, height);
-
-  return attachment;
-}
-
-- (UIImage *)prepareImageFromUri:(NSString *)uri {
-  NSURL *url = [NSURL URLWithString:uri];
-  NSData *imgData = [NSData dataWithContentsOfURL:url];
-  UIImage *image = [UIImage imageWithData:imgData];
-
-  return image;
-}
-
 @end
