[Loading] Use Loading outside of Frame

[jim-chou-shopify]

Feature request summary

Expose Loading component to be used outside of Frame.

Rationale

Marketing section has a use case to use Loading component to indicate a section of the page is loading.

@supervee

🌟 Feature requests that are not yet planned will be closed. We then use the issue’s 👍 upvotes to track and set priorities. See the contribution guidelines for more information.

[dpersing]

Hi @jim-chou-shopify! Is the loading component here meant to indicate that the whole page is updating, or just a section? If it's not the whole page, the spinner component might be a better choice (and doesn't require the use of the frame component). The loading component is typically meant to convey that a whole page is loading or a page-level activity is taking place, not just a section of the page.

[jim-chou-shopify]

Hi @dpersing,
I am aware of the current use case for Loading component.
We are wondering if it's possible to expose it for usage in individual component.
@supervee @macdonaldr93

[supervee]

Our thinking was that using this would be more effective than a spinner because:
a) it's loading an external page in a frame, it will help reinforce that the contents are from the app developer
b) because loading can happen quite often and be unpredictable in length, if a spinner were to constantly pop in and out, the experience would be quite jarring.

[dpersing]

Thanks for the extra context, @jim-chou-shopify and @supervee!

@ry5n Do you have thoughts on this?

[ry5n]

I don’t have strong feelings on this. I like the idea of emphasizing the content is from an external source, but I’m not sure the loading bar is enough for people to understand that.

@alyseadlard has done a lot of thinking about loading states, I wonder if she’d have some thoughts on the experience.

Making this available outside of the frame might take some doing. @tmlayton may have thoughts on the engineering as well as the user experience.

[jim-chou-shopify]

@ry5n I agree that ux may need further discussions, but I feel the engineering aspect is straightforward by exporting Loading component.

[alyseadlard]

Hey all, just a couple questions:

it's loading an external page in a frame, it will help reinforce that the contents are from the app developer

I'm not sure I understand the rationale here. Wouldn't use of Loader imply that it's core that's loading the content, not an app?

I might need some help understanding what Frame means in terms of UI. How is the content that's being loaded displayed? Is it the entire page? Is it just a modal? Is it just a section within the page?

[jim-chou-shopify]

The use case is to show a loading bar for preview section when fetching app generated url.
The url is used as iframe source in the preview section.
Preview section is part of a form page and we want to use the loading bar in the preview to indicate the section is changing/loading.

[alyseadlard]

Cool, can I get some screenshots? Not sure what "Preview section" means.

[jim-chou-shopify]

A gif of the preview section is under Rationale section of the issue and it's a Card.

[alyseadlard]

Is this a card or is it a modal? Sorry, I need a bit more context.

[jim-chou-shopify]

There is also a link to the PR for our use case .

[alyseadlard]

From a UX POV, Loading should only be used to indicate page level loads/transitions. Any in page loading should use either Spinner or skeleton loaders. It looks like this content is being loaded within the page, correct me if I'm wrong.

[jim-chou-shopify]

Yes it's part of the page.

[alyseadlard]

I'd suggest using Spinner or skeleton loading for your use case then.

[supervee]

Every preview is different and created by apps (not always 1P), so it would be difficult for us to create a skeleton that properly depicts what is to come

We considered spinner as an option but think it is the lesser experience because:

• preview reloads every time the user changes something on the form
• preview loading time can range anywhere from immediately to several seconds

We wanted to minimize the possibility of the spinner flashing in and out when the form is changed / when the loading time is quite small.

Technically it is "part of the page" but the content being loaded is from an external page into a frame. Here is a screenshot of the full screen for more context:

Everytime the form on the left is changed, we reload the preview on the right. (We send a request to the app to fetch a new preview)

[macdonaldr93]

Just for some added information... Another reason the spinner can be a bit weird is that the preview refreshes based on the merchants interaction with the form. This isn't the best example because we've done some improvements around what event triggers the refresh, but here's a gif of typing with the spinner to refresh the preview:

There's also an overlay in this gif but the point being, a spinner coming in and out would still be a big UI change that would feel jarring.

With the loading bar, it's less intrusive and the merchant would be able to see the previous preview while continuing to edit the form.

[alyseadlard]

Gotcha, thanks for the clarity @supervee @macdonaldr93! I see what you mean about both skeleton being too unpredictable and spinner being too disruptive. If it's not too much work (@tmlayton would know), let's make Loader available outside of the frame. This is a pretty unusual case though, so if we do this we should provide clearer documentation about do's and don'ts so that it doesn't get misused down the road. Would like to hear your thoughts on that @ry5n.

[jim-chou-shopify]

FYI, we are trying to expose Frame/components/Loading component to be used outside of Frame.

[tmlayton]

Hey everyone, sorry I missed this! What did you end up going with in the marketing section?

@tmlayton may have thoughts on the engineering as well as the user experience.

My initial reaction on the UX is it sounds reasonable, but not enough that I would immediately commit to doing the work in Polaris.

Can we use your work in the marketing section as exploration around a section-specific loading bar? I would recommend building the component out in web in the polaris-next sub package: https://github.com/Shopify/web/tree/master/packages/%40shopify/polaris-next.

The engineering effort for this should be minimal.

[jim-chou-shopify]

Hi @tmlayton,
We have started using the loader in the context of a loading preview for marketing activities.
We also made some tweak to control loading animation through prop and finish the animation on complete.

https://github.com/Shopify/web/pull/12400

[tmlayton]

Looks really nice! Is this something you would have the time to contribute to Polaris?

[jim-chou-shopify]

Ya for sure. I can create a PR to Polaris with the loader.

[ghost]

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.