New page loading and error cases:

* adding new custom elements: spinner and error
* using them on async tasks
This commit is contained in:
John Livingston
2024-06-11 16:25:05 +02:00
parent 75ac7a1052
commit 597afc8ba6
9 changed files with 55 additions and 6 deletions

View File

@ -107,3 +107,5 @@ declare const LOC_ACTION_IMPORT_EMOJIS_INFO: string
declare const LOC_ACTION_ADD_ENTRY: string
declare const LOC_ACTION_REMOVE_ENTRY: string
declare const LOC_ACTION_REMOVE_ENTRY_CONFIRM: string
declare const LOC_LOADING_ERROR: string

View File

@ -230,6 +230,8 @@ export class ChannelConfigurationElement extends LivechatElement {
}
return this._asyncTaskRender.render({
pending: () => html`<livechat-spinner></livechat-spinner>`,
error: () => html`<livechat-error></livechat-error>`,
complete: () => html`
<div class="margin-content peertube-plugin-livechat-configuration
peertube-plugin-livechat-configuration-channel">

View File

@ -71,7 +71,8 @@ export class ChannelEmojisElement extends LivechatElement {
}
}
return this._asyncTaskRender.render({
pending: () => {},
pending: () => html`<livechat-spinner></livechat-spinner>`,
error: () => html`<livechat-error></livechat-error>`,
complete: () => html`
<div
class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-channel"
@ -150,10 +151,7 @@ export class ChannelEmojisElement extends LivechatElement {
</div>
</form>
</div>
`,
error: (err: any) => {
this.registerClientOptions?.peertubeHelpers.notifier.error(err.toString())
}
`
})
}

View File

@ -47,6 +47,8 @@ export class ChannelHomeElement extends LivechatElement {
protected override render = (): unknown => {
return this._asyncTaskRender.render({
pending: () => html`<livechat-spinner></livechat-spinner>`,
error: () => html`<livechat-error></livechat-error>`,
complete: () => html`
<div class="margin-content peertube-plugin-livechat-configuration peertube-plugin-livechat-configuration-home">
<h1>
@ -62,7 +64,7 @@ export class ChannelHomeElement extends LivechatElement {
<a href="${channel.livechatConfigurationUri}">
${channel.avatar
? html`<img class="avatar channel" src="${channel.avatar.path}">`
: html`<div class="avatar channel initial gray"></div>`
: html`<div class="avatar channel initial gray"></div>`
}
</a>
<div class="peertube-plugin-livechat-configuration-home-info">

View File

@ -0,0 +1,19 @@
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
//
// SPDX-License-Identifier: AGPL-3.0-only
import type { DirectiveResult } from 'lit/directive'
import { html, TemplateResult } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import { LivechatElement } from './livechat'
import { ptTr } from '../directives/translation'
@customElement('livechat-error')
export class ErrorElement extends LivechatElement {
@property({ attribute: false })
public msg: string | DirectiveResult = ptTr(LOC_LOADING_ERROR)
protected override render = (): TemplateResult => {
return html`${this.msg}`
}
}

View File

@ -9,3 +9,5 @@ import './dynamic-table-form'
import './configuration-row'
import './tags-input'
import './image-file-input'
import './spinner'
import './error'

View File

@ -0,0 +1,14 @@
// SPDX-FileCopyrightText: 2024 John Livingston <https://www.john-livingston.fr/>
//
// SPDX-License-Identifier: AGPL-3.0-only
import { html, TemplateResult } from 'lit'
import { customElement } from 'lit/decorators.js'
import { LivechatElement } from './livechat'
@customElement('livechat-spinner')
export class SpinnerElement extends LivechatElement {
protected override render = (): TemplateResult => {
return html`<div></div>` // CSS does the trick.
}
}