New page loading and error cases:

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

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