Fire an event after all zuix components have loaded?

[speezlab]

Hi - great template!

...I am making use of Firestore (google cloud platform) for authentication and some other data elements for this app.

When the user has an active session, it emits a Firestore event (onAuthStateChanged). I have functions for Firestore in index.js ..When this onAuthStateChanged event is emitted, it alters content and calls functions on subsequent pages and components that zuix handles.

For example onAuthStateChanged emits because the user is logged in and can see specific content.

It appears that the Firestore onAuthStateChanged event is emitted BEFORE some of my javascript for sub-pages is finished loading. I am loading those pages like so:
<section data-ui-load="pages/profile" data-ui-options="options.profilePage"></section>

So I get errors like TypeError: Cannot read properties of undefined (reading 'setupMainMenuUI') (which is a function inside of profile.js); I'm assuming it's not available yet because the onAuthStateChanged emits BEFORE the profile page is done loading.

Is there a way to emit an event AFTER all the pages (html, css, and js) are loaded so that I can then define actions for Firestore? (or any tips on how to handle this?)

Thanks!

[genemars]

Yes, you can provide the ready callback in the data-ui-options (that is now z-options in the latest API).

options.profilePage = {
   ...
   ready: (ctx) => {
       // ctx is the component/page instance
       console.log(ctx);
   }
}

Alternatively you can use the zuix.context method anywhere in the code to get safely a reference to a component (or page).
It's an asynchronous method that will fire a callback passing to it a reference to the component context instance for that particular component/page only after it has been fully loaded.

Full docs -> https://zuixjs.org

Also have a look to the new version of this template:
https://github.com/zuixjs/news-blog