New embedded chat: spinner while loading

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);
+      }
+    }
+  }
+}

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

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 {