New page loading and error cases:

* adding new custom elements: spinner and error
* using them on async tasks

assets/styles/style.scss

@@ -110,6 +110,7 @@
   color: orange;
 }
 
+livechat-error,
 .peertube-plugin-livechat-error {
   color: red;
 }
@@ -202,6 +203,7 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
   }
 }
 
+livechat-spinner,
 .livechat-spinner {
   display: flex;
   flex-direction: row;
@@ -246,3 +248,9 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
     max-width: 30vw;
   }
 }
+
+livechat-error {
+  display: block;
+  padding: 50px;
+  text-align: center;
+}

client/@types/global.d.ts

@@ -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

client/common/configuration/elements/channel-configuration.ts

@@ -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">

client/common/configuration/elements/channel-emojis.ts

@@ -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())
-      }
+      `
     })
   }
 

client/common/configuration/elements/channel-home.ts

@@ -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">

client/common/lib/elements/error.ts

@@ -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}`
+  }
+}

client/common/lib/elements/index.js

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

client/common/lib/elements/spinner.ts

@@ -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.
+  }
+}

languages/en.yml

@@ -515,3 +515,5 @@ action_import_emojis_info: If imported data are okay, don't forgot to save the f
 action_add_entry: Add an entry
 action_remove_entry: Remove this entry
 action_remove_entry_confirm: Are you sure you want to remove this entry?
+
+loading_error: An error occured while loading data.