Utilitário de Suspense
O utilitário suspense permite a renderização lenta do conteúdo usando o método replace nas instâncias do modelo, ao mesmo tempo que permite lidar com o carregamento e o estado de erro.
javascript
const loadTodos = async () => {
const res = await fetch('/api/todos')
if (!res.ok) {
throw new Error(`${res.status}: ${res.statusText}`)
}
const { result } = await res.json()
return result.map((item) => html`<li>${item.name}</li>`)
}
html`<ul>
${suspense(loadTodos)}
</ul>`.render(document.body)Carregando estado
Você pode passar um conteúdo de carregamento personalizado para renderização enquanto o trabalho assíncrono está sendo executado. O suspense possui um indicador de carregamento padrão que pode não ser o que você deseja.
javascript
html`<ul>
${suspense(loadTodos, html`<loading-spinner></loading-spinner>`)}
</ul>`.render(document.body)Estado de erro
Você também pode fornecer uma função como terceiro argumento para lidar com como deseja exibir quaisquer erros. O suspense possui um modo padrão que pode não ser o que você deseja.
javascript
html`<ul>
${suspense(
loadTodos,
html`<loading-spinner></loading-spinner>`,
(error) => html`<error-display error="${error}"></error-display>`
)}
</ul>`.render(document.body)