FilamentF
Filament•2y ago
Benjámin

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 Typography component that handles the logic here. Also attached a video snippet that show the issue, where there is 2 cycles of loading states.
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 -> updated function runs, and stores the file.
  2. The updated function dispatch-es change-font with the font-face information, including the src.
  3. The event reacting to the change-font replaces the correct font-face in the dom.
  4. The dom loads up the font by the given src.
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.
Typography.php5.8KB
typography.blade.php2.76KB
Solution
Resolved, but hardly an exemplary solution.
We delay the <x-loading /> with wire:loading.delay.longer, and also sleep for half a sec.
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'.
Jump to solution
Was this page helpful?