fastn loading state

[harshdoesdev]

There should be a way to check if fastn-js has loaded and completely initialized. This will allow users to properly handle the loading state and ensure that all fastn dependencies have been loaded and hydration is complete. Currently, users don't have a built-in and stable method of handling this, leading to unexpected behaviors if the user is using custom JavaScript. Even in native fastn, there should be a way of handling it, similar to ftd.dark-mode.

My proposal is that there should be a global variable, like ftd.dark-mode, specifically for handling the loading state. We can call it ftd.loaded-state or something similar. It should be mutable, with its initial value set to loading. After everything has loaded, in the post-init callback, we can update it to loaded. Users can subscribe to this mutable and write their code accordingly to handle the loaded state, such as displaying/hiding a loading screen, etc.

For advanced users, we can also emit a CustomEvent like fastn-loaded-state-changed, and the users can subscribe to this event and call some function to do post-init stuff.

cc: @Arpita-Jaiswal @amitu

[amitu]

Since this is pure JavaScript need let's not create mutable fastn variable and instead aadd an on load method to the fastn JS library so people can pass their onload callbacks and they will be call at the right time. Does this work?

[harshdoesdev]

Yes, I think we should go ahead with the $on-load$ event, as it can be used for much more than just displaying a "loading screen.

[amitu]

Not $on-load$. This is not related to fastn, why would I need to add anything to any .ftd file? This is a JS API thing.

We currently recommend:

class NumToWords extends HTMLElement {
    constructor() {
        super();
        let data = window.ftd.component_data(this);
        // do something with JS
    }
}

This code is buggy. It should be something like this:

class NumToWords extends HTMLElement {
    constructor() {
        super();
        window.ftd.on_load(function() {
             let data = window.ftd.component_data(this);
             // do something with data
       });
    }
}

[harshdoesdev]

Awesome! This is what I recommended initially, but I like this idea of using an ftd lib function instead of a CustomEvent.

[amitu]

This is implemented.