Material-components-web: Event to detect all components init is complete

[yshterev]

Is there a way to know when mdc components are completely loaded after mdc.autoInit() is called? I cannot find anything like this in the docs.

[Garbee]

Nothing like this is currently provided as far as I recall. What we could do is have autoInit return a promise resolution when completed so you can asynchronously handle tasks when the upgrades are completed for all components.

[yshterev]

What I have now is ES5 dist version of MDC-Web loaded from npm, and then I load lory slider. Because mdc.autoInit() changes the DOM and lory is loading in the meantine, the slider gets wrong sizes. Currently I can only make it work if I wait for window.onload event (which can be slow), or use setInterval to watch for some DOM changes from mdc and then init lory.

Your solution seems fine. I am only not sure how the promise it will get handled in ES5 version. Can you show example?

[Garbee]

Babel loader can back transpile them.

[yeelan0319]

@Garbee is right that we do not have something provides that for the moment but this is definitely a valid ask.

We have been trying to avoid using promise in MDC for compatibility consideration, but we believe a custom event should be enough to help here. @yshterev Would you like file a PR for helping us making the changes?

The files we need to change are:

• [ ] mdc-auto-init at the end of the call (line 51), we should fire an event MDCAutoInit:End with mdc-base/component.js's emit method (line 108). You could refer to mdc-dialog/index.js if you are not sure how to use emit
• [ ] Update mdc-auto-init test to ensure that the event is fired correctly
• [ ] Update mdc-auto-init README.md for this new event

Once you have the PR, we will help you merge it in.

[yshterev]

+1 for event over promise :) I will make the PR.

[yeelan0319]

Quick question reflected in the PR. @yshterev

Is the event wanted after ALL component/after auto-init finished, or EACH component as soon as they instantiated? I can see both of them valid but which one would be more useful.

[Garbee]

All for auto init. Each component level events would be tricky to have a case for now. As the events could fire in many cases before or after being in the DOM. So there isn't much there other than a thing happened that could be consistently relied on.

Component level events should be assessed as needed.

[yeelan0319]

@yshterev @Garbee I see. This make sense.

In this case, instead of using emit method on a component, let's dispatch the event directly from autoInit. @yshterev Feel free to take a look at how component emit is defined from packages/mdc-base/component.js line 116 and 117, I think we can do something similar here in mdc-autoinit.