[FEATURE ENHANCEMENT] Suspense Directive

Feature Enhancement Description

Feature Overview: A suspense directive could be used to improve displaying async data. Suspense components / directives are commonplace in other frameworks.

Current Functionality: There is no such functionality in Nørd

Suggested Enhancement: Creating a suspend or suspended directive, that will take a Promise as argument and resolve a specified template on resolution, with an optional fallback template until the promise resolves.

Benefits of Enhancement: This directive would greatly benefit async operations in Nørd

Additional Information

Related Features:
Similar Implementations:
See https://svelte.dev/docs/logic-blocks#await https://www.solidjs.com/tutorial/async_suspense

Possible Implementation 💡

Suggested Approach: This feature is best implemented as a custom Text directive, similiar to the when or each directives
Code Samples:

const promise = new Promise<number>((res) => {
    setTimeout(() => {
        res(1)
    }, 500)
})

<div>
    ${resolve(promise)
        .then((data) => html`<div>${data}</div>`)
        .fallback(html`<div>...loading</div>`)
    }
</div>

Grainular-Nord / nord