F
Filament•2y ago
Mark Chaney

Widget Animation

I have 3 wigets above a table that gets its data from the tablequery and its values are emitted to it after the table is rendered and when filters are updated. Works great, but I would like to have some type loading animation or something other than seeing the values quickly go from 0 to the correct number. Any suggestions?
8 Replies
Patrick Boivin
Patrick Boivin•2y ago
I'm curious to know what the fully loaded page looks like, is this something you can share?
awcodes
awcodes•2y ago
maybe a skeleton loader that covers everything with wire:loading to show and hide it?
Mark Chaney
Mark ChaneyOP•2y ago
Right now i just have 
Card::make('Total Units', number_format($this->data['totalUnits'] ?? null))
Card::make('Total Units', number_format($this->data['totalUnits'] ?? null))
on each card to set the initial values of 0, then when data is updated through an emit, the values change. Hoping to find a solution that i can use really with a lot of our widgets. Wish lazy loading was also built into widgets. I know there is a trick published, but requires overriding a view Im fine with doing the standard spinner in place of the 0 but even the entire widget having a loading type experience like tables too
Patrick Boivin
Patrick Boivin•2y ago
The first thing that comes to mind for me is often a ramp up from 0 (like you said). But I can see it becoming annoying quickly, in an admin context... Maybe a very light spinner? Or an animated ... (one dot appears after the other, then the number fades in)
awcodes
awcodes•2y ago
would really need to see it to offer design input. 🙂
Mark Chaney
Mark ChaneyOP•2y ago
message sent. I do though think in general, its more a general widget experience type of need
awcodes
awcodes•2y ago
yea, i think @pboivin is on a good path with the 3 dots animated in place of the actual number. probably the easiest thing to do. should be easy enough with css and wire:loading
Mark Chaney
Mark ChaneyOP•2y ago
I went simple with 
    protected function getCards(): array
    {
        // pulse animation on Card if data is not yet loaded
        $extraAttributes = $this->data ? [] : ['class' => 'animate-pulse text-opacity-50'];

        return [
            Card::make('Available Units', number_format($this->data['availableUnits'] ?? null))
                ->extraAttributes($extraAttributes),
            Card::make('Total Units', number_format($this->data['totalUnits'] ?? null))
                ->extraAttributes($extraAttributes),
            Card::make('Total Properties', number_format($this->data['totalProperties'] ?? null))
                ->extraAttributes($extraAttributes),
        ];
    }
    protected function getCards(): array
    {
        // pulse animation on Card if data is not yet loaded
        $extraAttributes = $this->data ? [] : ['class' => 'animate-pulse text-opacity-50'];

        return [
            Card::make('Available Units', number_format($this->data['availableUnits'] ?? null))
                ->extraAttributes($extraAttributes),
            Card::make('Total Units', number_format($this->data['totalUnits'] ?? null))
                ->extraAttributes($extraAttributes),
            Card::make('Total Properties', number_format($this->data['totalProperties'] ?? null))
                ->extraAttributes($extraAttributes),
        ];
    }

Did you find this page helpful?