Darkdawg's avatar

Livewire Image upload component performance

I have a massive admin image upload component, and the performance is starting to bother me.

The component handles uploads, resizing, generating modern formats (avif / webp), all with a live preview. We're talking like 30 different inputs, and like 600 views within the component according to my debugbar. I'm using mostly Flux UI stuff.

Now I'm not concerned with the generation performance, but the rather the page load and Livewire property updates. These are around 200-250 ms on local.

Now the front-end is organized into 3 tabs: general, context, advanced. Each tab holds just about 1/3 of the form inputs. There's also some modals and other hidden content.

Is there an easy way to not update content that isn't visible, until it's visible? Or perhaps lazy load it? Or if I split my component form tabs into separate components, would they be ble to communicate back and forth somehow?

1 like
2 replies
DoubleClickDesignLtd's avatar

@darkdawg I've also done a lot of work in Livewire 2 and 3 with Image upload admin panels including image chunking of large file etc. Can you post some code and bullet point your goals and I'll see if I can help you.

1 like
vincent15000's avatar

You ask how prevent hidden components from loading before they are visible, but the title of your post is about image uploading.

What takes more time to load ? The images or the hidden components ?

Please or to participate in this conversation.