**Todays Question**
# package-development
w
Todays Question Is there a pattern to try and follow to show a
<uui-loader>
whilst waiting for my API response call ?
n
generally i lit you can do this: ${ this.somethingIWaitFor ? html`.. when loaded` : html`</uui-loader` Its not something we have focused on so far, so maybe we will find better ways to do it as we start looking at the ui experience
w
Doubt my API call will ever take long - but probably nice to show something is loading to the user
So just have a bool
isLoaded
or something like that that gets set to true in the promise coming back from the API call
Also what does tryExcuteAndNotify() helping me to do? Ie what do I get for free and not have to write myself ?!
Also is the pattern for loading things to have a loader inside a uui-box if the data is to be put inside it once loaded/fetched. Or do I not show the uui-box at all and just have the loader and then show the box and data together once ready
Also you have three loaders, is there one that should be used more than another and if I go for the circle of these dots. Should it be placed centered in the uui-box ? I know I can do whatever I want here, but be good to try and follow similar UI patterns you will be using.
And I am clearly doing something wrong, my API call gets the data (can see it in network request) but the loader never goes away and show me something from my API data 🤔
Copy code
private async _getThing(key: string) : Promise<ISearchResult | undefined> {
    const { data, error } = await tryExecuteAndNotify(this, ThingResource.getThing({key: key}))
    if (error){
        console.error(error);
        return undefined;
    }
    
    this._hasLoadedRecord = true;
    return data;
}
Copy code
render() {
        return html`
            <umb-body-layout headline="Thingy">
                <uui-box>
                    ${ this._hasLoadedRecord ? html `<h2>${this._thingItem?.id}</h2>` : html `<uui-loader></uui-loader>` }
                </uui-box>
                
                <uui-box>
                    <h2>Return Value</h2>
                </uui-box>

                <div slot="actions">
                    <uui-button id="close" label="Close" @click="${this.handleClose}">Close</uui-button>
                </div>
            </umb-body-layout>
        `;
    }
Arggh OK forgot to decorate my property with
@property()
to make it reactive 🙈
n
Regarding loaders, style, thats the same as yesterday, havent had time to think about how we like to do this. So its just as you would do in current version. notice @property are for public reactive properties.. where @state is for local reactive properties.
w
Yeh after revisiting the lit docs/guides I have changed it to @state
You sick and tired of my questions yet @Niels Lyngsø 😂
n
not yet.. 😛
but I can tell on the spectrum of UI / UX, we are not spending too much time yet. We are focusing on the Core APis. so please keep it on that topic. 🙂 the other idea/feedback are good, but save them 🙂
w
I’ll stop being the annoying kid then!
2 Views