feat: making donut having a loading state

[axel7083]

What does this PR do?

Adding a loading state for the Donut.svelte component. This is backward compatible, as the loading state is false by default.

This PR only add the support to the Donut, no component are using it for now, it will be in a follow up PR

Screenshot / video of UI

See comments

What issues does this PR fix or reference?

Related to #5837

How to test this PR?

• Unit tests has been added

[deboer-tim]

I think we should still show the title during loading, otherwise I wonder why there are two spinners and have to hover over to see their purpose.

[axel7083]

I think we should still show the title during loading, otherwise I wonder why there are two spinners and have to hover over to see their purpose.

@deboer-tim Here is an updated version displaying the provided value even when loading

This mean the parent is responsible of displaying an appropriate value when loading.

loading-donut.mp4

[axel7083]

the transform-box: fill-box; is not yet supported by tailwinds, ref tailwindlabs/tailwindcss#10982

[deboer-tim]

Note that I was just suggesting the title was shown while loading, not value. :)

This got me thinking though: why introduce a new exported loading property, where we could end up with cases like 'loading but value shown' or 'not loading but no value' vs just making the loading animation appear whenever the value isn't set (or perhaps is set to an invalid value)?

[axel7083]

Note that I was just suggesting the title was shown while loading, not value. :)

This got me thinking though: why introduce a new exported loading property, where we could end up with cases like 'loading but value shown' or 'not loading but no value' vs just making the loading animation appear whenever the value isn't set (or perhaps is set to an invalid value)?

Because I wanted to be backward compatible as some elements are using the Donut component. It is honestly pretty complicated for nothing, for example, why the donut is responsible of building the tooltip (${percent}% ${title} usage), it is not generic, nor easily reusable.

My personal thought:

(1) It should act as a progress bar
(2) It should have 4 properties label: string, value: number, loading: boolean, color: string

• label should be used in the tooltip + for the text
• the value should be used for the progress
• loading to make the animation or not
• color for the progress indicator

Then, a wrapper component could be created to be used for resource usage etc.

[deboer-tim]

Donut isn't external API, so we only need to make sure we don't break existing places where it's used inside Podman Desktop - but we can always fix those references when we're improving the component. +1 to improving the way the tooltip works or changing title to label.

The original issue didn't talk about using Donut as a general progress widget, and our designs normally use Spinner or LinearProgress for that. Can you point me at where/how it would be used? IMHO some kind of 'if (!value) then loading = true' would be a good improvement to make either way for most of our current use.