From 67a1a6e32da67c8570a92529397037ea071f52a3 Mon Sep 17 00:00:00 2001
From: John Livingston <git@john-livingston.fr>
Date: Tue, 26 Mar 2024 17:38:40 +0100
Subject: [PATCH] New embedded chat: spinner while loading

---
 assets/styles/style.scss                | 28 +++++++++++++++++++++++++
 client/common/configuration/register.ts | 10 ++++++++-
 conversejs/builtin.ts                   |  7 +++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/assets/styles/style.scss b/assets/styles/style.scss
index f3f57015..c388572d 100644
--- a/assets/styles/style.scss
+++ b/assets/styles/style.scss
@@ -169,3 +169,31 @@ table.peertube-plugin-livechat-prosody-list-rooms td {
     min-height: 60px;
   }
 }
+
+.livechat-spinner {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  div {
+    width: 48px;
+    height: 48px;
+    margin: 20px;
+    border: 5px solid var(--greyBackgroundColor);
+    border-bottom-color: var(--mainColor);
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: livechatrotating 1s linear infinite;
+
+    @keyframes livechatrotating {
+      from {
+        transform: rotate(0deg);
+      }
+
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}
diff --git a/client/common/configuration/register.ts b/client/common/configuration/register.ts
index 83f0aec2..9903da0d 100644
--- a/client/common/configuration/register.ts
+++ b/client/common/configuration/register.ts
@@ -37,17 +37,25 @@ async function registerConfiguration (clientOptions: RegisterClientOptions): Pro
         }
 
         const converseJSParams: InitConverseJSParams = await (response).json()
-        await loadConverseJS(converseJSParams)
 
         const container = document.createElement('div')
         container.classList.add('livechat-embed-fullpage')
         rootEl.append(container)
+
         const converseRoot = document.createElement('converse-root')
         converseRoot.classList.add('theme-peertube')
         container.append(converseRoot)
 
+        const spinner = document.createElement('div')
+        spinner.classList.add('livechat-spinner')
+        spinner.setAttribute('id', 'livechat-loading-spinner')
+        spinner.innerHTML = '<div></div>'
+        container.prepend(spinner)
+        // spinner will be removed by a converse plugin
+
         const authHeader = peertubeHelpers.getAuthHeader()
 
+        await loadConverseJS(converseJSParams)
         window.initConverse(converseJSParams, 'peertube-fullpage', authHeader ?? null)
       } catch (err) {
         console.error('[peertube-plugin-livechat] ' + (err as string))
diff --git a/conversejs/builtin.ts b/conversejs/builtin.ts
index 45ed60ea..09640178 100644
--- a/conversejs/builtin.ts
+++ b/conversejs/builtin.ts
@@ -137,6 +137,13 @@ window.initConverse = async function initConverse (
     // livechatSpecifics plugins add some customization for the livechat plugin.
     converse.plugins.add('livechatSpecifics', {
       dependencies: ['converse-muc', 'converse-muc-views'],
+      initialize: function () {
+        const _converse = this._converse
+        _converse.api.listen.on('chatRoomViewInitialized', function (this: any, _model: any): void {
+          // Remove the spinner if present...
+          document.getElementById('livechat-loading-spinner')?.remove()
+        })
+      },
       overrides: {
         ChatRoom: {
           getActionInfoMessage: function (this: any, code: string, nick: string, actor: any): any {