Retool storage images load slow

Mobile
1

I’m using retool storage with the file upload / image upload component. I already enabled the checkbox for optimizing images so they are reduced in size. However, loading those images as a thumbnail or as normal size takes a long time. There’s no loading icon or placeholder until the image is loaded. There’s only a white space.

  1. Is there a way to optimize uploads even further if the camera is used?
  2. Is there an option to load them as a thumbnail from retool storage?
  3. Does anyone have another solution for this? Caching? Workflow? Cdn? Loading svg placeholder?
1 Like
2

@Steven_W I've had success using imgix.com in the past. Not an official Retool recommendation, just something I've used at past companies.

You input a public web URL like https://<org>.retool.com/api/file/16260720-39d2-41d2-b2dc-7f3f1fea3be3 and it makes it available at a URL like https://<foo>.imgix.net/16260720-39d2-41d2-b2dc-7f3f1fea3be3, and then you can add query params like ?w=100 to resize it to 100px, etc. Everything is cached under the hood so you only pay the resize cost once.

3 Likes
3

Thanks. That sounds interesting. I’ll look into it.

One more thing:

When the image is loaded from retool storage, I display it in a custom collection list. As a small thumbnail. When press it, the detail screen is opened. That same image {{item.image}} is used but then bigger. It looks like it loads it all over again. Which is weird because there isn’t another query triggered. I’m using the file ID and not the url.

  1. Would url make a difference in case of retool storage?
  2. Is there a better way to make sure the image doesn’t have to be loaded again if it is already loaded in the list screen?
1 Like
4

It looks like Retool Storage images are served with a cache-control header so subsequent fetches should be cached even if you are fetching by file ID and not url.

Without knowing more about your code, I suspect there is some other async processing being done that looks like network fetch but is not -- e.g. under the hood the Image component needs to load the bitmap data for the image, resize it, etc. All that work takes time.

1 Like
5

As source of the thumbnail I have this:

{{item.image ? item.image : '5e9cf38b-6b7a-44f0-86e0-5f5b7d714fa7'}}

For the source of the detail view and the image component in it I have this:

{{selected_ticket.value.image}}

On the button in the custom collection list I have the click event handler set to “set variable” to set selected_ticket to this:

{{item}}

Here’s a screenrecording:
image

As you can see, the thumbnail is already loaded.
The only thing I can think of is that I shouldn’t use a variable. But how do I use selected item with a custom collection and a button with event handler? Is there another way to set the selected item?

1 Like
6

Yeah, sadly I don't think that performance issue is network-bound. How large is that image?

7

617 kb. :joy:

1 Like
8

Is that really it? How to remedy this? Or show a loading placeholder for the detail screen image :thinking:

9

@Steven_W one idea is to hard-code the image as a base64 string. That way you know the image isn't being served over the network. That'll give you more insight into whether it's a network caching issue or a local rendering issue.

You can use base64 like this:
Screenshot 2024-05-16 at 3.59.44 PM

10

I did that. There’s zero delay there. So it seems there’s a network / component rendering issue here. :smiling_face_with_tear:

The best performance would be generating base64 from the thumbnail and load that. Which seems to me as a dirty hack.

Would be good to know how this works internally from someone from Retool.

  • is this a bug?
  • is it reloading the image from retool storage because it’s a different component?
  • is it a scaling issue?
  • is it loading over the network at a higher resolution and then trying to adjust it? :exploding_head: I got no clue
1 Like
11

yeahhh same. overall i've been impressed with image loading in our Retool apps (we use CloudFront URLs for S3 objects) but I'd love answers to all those questions too :slight_smile:

12

I guess I will encode the images when the list is loaded and store them in local storage and reference the local storage from the detail screen. I don’t see another option other than getting third party tools involved :pensive:

1 Like