Hi there,
I’m using wire:loading to show a placeholder. The data fetched contains images which are then embedded onto the page.
Whilst the placeholder shows during the initial fetching of data, while images get loaded it disappears. This creates an empty state where the wire:loading disappears and there is blank space until the images are loaded.
My question: Is it possible to keep wire:loading active until the elements fetched are displayed/loaded?
From livewire’s perspective, it’s completed the loading. That’s why the loading disappears. All the HTML that it needs to diff has been fetched. What I think you want is for the images to load and then the loading to disappear but subsequent server calls to fetch the images are handled with traditional HTTP requests outside of livewire. This is probably something you’d have to craft separately. Something like an image loader that triggers the an event to let you know the loading is finished then you can hide your loading screen.
Alternately (this is just concept, I haven’t tried to do this but it seems like it could work within livewire), you can use data img uri. Get the data from the image and encode it to a base64 string then set the img src to that string. This should load it from livewire and keep the behavior you’re expecting.
Your image would look like:
<img src="data:image/gif;base64,somelongbase64encodedstring" data-src="filename.gif" />
Thanks for the response - I ended up just adding a class before and after loading which gave the desired affect. Many thanks shortbrownman!