Loading UIImages to collectionView from local storage is very slow

Question

I am trying to load some images saved locally (using Disk ) to a UICollectionView . Whenever I try to fetch them, the app hangs for about 10 seconds. This tells me I am doing something very wrong.

I am thinking of loading them asynchronously and whenever one of them loads, displaying it first. However, I have them on local storage so why does it take so much time to load them?

The images are imported from the user's iPhone and are not compressed. When loading them, I am loading the whole image (I know it's bad).

Can someone point me towards the right direction?

Here is the first part of the loading process:

   func fetchImage(path: String, imageID: String, completionHandler: @escaping (() throws -> UIImage) -> Void) {
    do {
        let imagePath = path + imageID + ".png"
        let image = try Disk.retrieve(imagePath, from: .documents, as: UIImage.self)
        completionHandler{ return image }
    } catch {
        completionHandler{ throw AlbumStoreError.CannotFetch("Cannot fetch Image with Error: \(error)") }
    }
}

here Is the second part

func fetchImages(path: String, completionHandler: @escaping ([UIImage]) -> Void) {
    albumsStore.fetchImages(path: path) { (images: () throws -> [UIImage]) in
        do{
            let images = try images()
            DispatchQueue.main.async {
                completionHandler(images)
            }
        } catch {
            DispatchQueue.main.async {
                completionHandler([])
            }
        }
    }
}

here is how it's presented. Basically it returns the whole array and reloads the collection view

func presentImages(response: Collage.Images.Save.Response){
    let images = response.images
    let viewModel = Collage.Images.ViewModel(images: images)
    viewController?.displayImages(viewModel: viewModel) }

Answer 1

The problem here is not speed of access to local storage, but rendering of images. You are loading all images from storage and rendering them, even for collection view cells which may be off screen, before displaying anything.

The usual way to handle this is to have the collection view request an image for a cell asynchronously as that cell scrolls in to view. ie the view should pull each image from the model, rather than trying to push images from your model into the view.

A complete explanation of how to do this properly is too long for an answer here but there are any number of examples and tutorials on how to do this, just Google asynchronous loading, or lazy loading. Also look at the prefetching API introduced in iOS 10.

See for example https://medium.com/capital-one-tech/smooth-scrolling-in-uitableview-and-uicollectionview-a012045d77f or Apple's documentation on prefetch: https://developer.apple.com/documentation/uikit/uicollectionviewdatasourceprefetching/prefetching_collection_view_data