add component property to spinner

[angorayc]

Summary

I would like to put a EuiLoadingSpinner in the title of EuiStat, but it complains about the p element from Stat shouldn't wrap div element from the spinner. Therefor I made a PR to make spinner accept component prop, so user can set it to div (default) or span. Please let me know if there's other solutions, any suggestions are welcome. Thanks a lot!

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
• This required updates to Framer X components

[ryankeairns]

Before looking into the code changes here, I was expecting to see the change on the EuiStat component as opposed to the EuiLoadingSpinner. Relatedly, a new EuiLoadingContent component was recently added and this has me thinking about a common pattern where we, say, pass some sort of isLoading prop on a component and the loading content is then displayed while true.

This pattern could then be followed on any components that need to show a loading state. Still thinking that through, but that is where my head is at. Is that making sense to others?

[angorayc]

That's definitely a good idea to add isLoading prop to EuiStat, but in this case we probably should also think about which loading component we are going to match, not sure if spinner is suitable for other cases. It's more like a product's question to me, but I think it would be useful if the loading icon could be a span 😛

[snide]

Agree with @ryankeairns that because this component should always load some sort of metric it might make sense to do this with an actual prop so that we have a consistent way to convey the action across usages (rather than each app using their own implementation). We can discuss in our design review today and figure something out. @MichaelMarcialis tends to show up to those as well and can make sure it works for SIEM.

[cchaos]

I agree that I think both need to happen.

a. Add a loading state to EuiStat for consistency across all usages
b. Just change the EuiLoadingSpinner (and other loaders) to use spans with display: block (or inline-block with determined sizing so we don't keep running into this issue (I have also encountered it).

[angorayc]

Thank you so much for these brilliant solutions, closing this PR as the changed has been covered by #1845.