Filament•2y ago

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•2y ago

I'm curious to know what the fully loaded page looks like, is this something you can share?

awcodes•2y ago

maybe a skeleton loader that covers everything with wire:loading to show and hide it?

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•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•2y ago

would really need to see it to offer design input. 🙂

Mark ChaneyOP•2y ago

message sent. I do though think in general, its more a general widget experience type of need

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 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),
        ];
    }

Gaming

Programming

Widget Animation