Livewire 3 wire loading 2 cycles
Hi!
This question is about pure Livewire 3, not Filament. Does anybody know how to resolve the issue below?
I have a form, where users can upload fonts. Right next to the form, there is a preview block, where the uploaded font gets rendered.
I've attached the important parts of the
Anybody knows that the second loading happens, because of the dispatch, or the font face loading? And how can I prevent it? The result should be 1 cycle of loading started at the beginning of the file upload, and the end when the text is already showing with the correct font face.
The process looks like this in a nutshell:
1. The user uploads the file into the file input ->
2. The updated function
3. The event reacting to the
4. The dom loads up the font by the given
Also the ttf -> woff conversion isn't on point, I dunno if anybody has some advice about how to keep track of the converted file between requests to only store the converted one in the database once the user hits Next. Than I could return the woff even if ttf got uploaded.
This question is about pure Livewire 3, not Filament. Does anybody know how to resolve the issue below?
I have a form, where users can upload fonts. Right next to the form, there is a preview block, where the uploaded font gets rendered.
I've attached the important parts of the
TypographyAnybody knows that the second loading happens, because of the dispatch, or the font face loading? And how can I prevent it? The result should be 1 cycle of loading started at the beginning of the file upload, and the end when the text is already showing with the correct font face.
The process looks like this in a nutshell:
1. The user uploads the file into the file input ->
updated2. The updated function
dispatchchange-fontsrc3. The event reacting to the
change-font4. The dom loads up the font by the given
srcAlso the ttf -> woff conversion isn't on point, I dunno if anybody has some advice about how to keep track of the converted file between requests to only store the converted one in the database once the user hits Next. Than I could return the woff even if ttf got uploaded.
Typography.php5.8KB
typography.blade.php2.76KB
Solution
Resolved, but hardly an exemplary solution.
We delay the
This way we have ~750ms, so the user knows something is happening.
We still have 2 loading states, but only one has loading spinner, so there is no 'flicker'.
We delay the
<x-loading />wire:loading.delay.longerThis way we have ~750ms, so the user knows something is happening.
We still have 2 loading states, but only one has loading spinner, so there is no 'flicker'.
