Spinner / Progress Circle

[3ch023]

Details

For MWPW-138557, I need a spinner with the same design as Progress Circle of Spectrum Web Components.
I checked milo code and it doesn't have anything similar yet.

I need a community opinion of what is the best way to implement it.
I will use a spinner to load a modal with an iframe, so it's not impacting the initial load performance, but I would like to plan for any possible usage since this spinner could be reusable.

Options

Option 1 - Use Spectrum Web Components

• less effort

• possibly a performance impact. For my ticket it's not an issue, but might add to a tech debt when used by others.

Option 2 - own implementation

create a reusable feature. copy styles over to Milo.

Option 3 - pls suggest.

Any opinion?

[auniverseaway]

Why do you need a spinner? We had a case on UAR where they thought they needed a spinner, but they actually didn't. I would probably do some research here to see if a spinner is really necessary. Loading a spinner is not free and loading a spinner where you require an entire SPA framework (Lit) + Spectrum is also not free. You make your overall application slower loading these bits.

In the case of UAR, I believe it was half a PM request and half looking at the existing application. We should have both case studies presented to decide if a spinner really buys you what you want. Especially given the overhead you'll be taking on to show it.

I will use a spinner to load a modal with an iframe

For clarity: the modal should not need a spinner, but the content you are loading inside it. In this light, I would implement it in whatever actually needs it.

---

I think option 1 is the lesser of evils, but knowing you're incurring more debt than usual is a good point. Spectrum in its current state is going to change in the not so distant future. Spectrum Lite and Spectrum V2 are all on the table right now.

This all just has to be built in a de-coupled way where you only use a spinner when you have to. We shouldn't force it on other parts of Milo (i.e. modal or vanilla iframe) if it's not needed.

[3ch023]

Hi @auniverseaway , thank you for the input.

Why do you need a spinner?

Without a Spinner user sees an empty modal while waiting for an iframe to load the page.
here is example with/without:
https://www.stage.adobe.com/creativecloud/plans.html

spinnermin.mov

https://main--milo--adobecom.hlx.page/drafts/mariia/upgradeFlow/upgradeflow

nospinner.mov

I would implement it in whatever actually needs it.

That is a fair point, I added the progress circle for my feature only. SWC won't be loaded unless an eligible user clicks on the 'Upgrade Now' button.
I did use the spectrum implementation though since there is no perf. impact in my case and it saves time.
Will update this comment with PR soon