Use the bootstrap5 spinner

src/plugins/chatview/styles/chatbox.scss

@@ -150,13 +150,6 @@
             flex-direction: column;
             justify-content: space-between;
 
-            converse-chat-message {
-                .spinner {
-                    width: 100%;
-                    overflow-y: hidden;
-                }
-            }
-
             .chat-content__help {
                 max-height: 100%;
                 converse-chat-help {

src/plugins/controlbox/templates/controlbox.js

@@ -11,7 +11,7 @@ const { ANONYMOUS } = constants;
 function whenNotConnected(el) {
     const connection_status = _converse.state.connfeedback.get('connection_status');
     if ([Strophe.Status.RECONNECTING, Strophe.Status.CONNECTING].includes(connection_status)) {
-        return tplSpinner();
+        return tplSpinner({class: 'vertically-centered'});
     }
     if (el.model.get('active-form') === 'register') {
         return html`<converse-register-panel></converse-register-panel>`;

src/plugins/controlbox/templates/loginform.js

@@ -156,7 +156,7 @@ export default (el) => {
                 <p class="feedback-message ${!conn_feedback_message ? 'hidden' : ''}">${conn_feedback_message}</p>
             </div>
             ${CONNECTION_STATUS[connection_status] === 'CONNECTING'
-                ? tplSpinner({ 'classes': 'hor_centered' })
+                ? tplSpinner()
                 : form_fields(el)}
         </form>`;
 };

src/plugins/mam-views/tests/placeholder.js

@@ -105,7 +105,7 @@ describe("Message Archive Management", function () {
 
             const placeholder_el = view.querySelector('converse-mam-placeholder');
             placeholder_el.firstElementChild.click();
-            await u.waitUntil(() => view.querySelector('converse-mam-placeholder .spinner'));
+            await u.waitUntil(() => view.querySelector('converse-mam-placeholder .spinner-grow'));
 
             iq_get = await u.waitUntil(() => sent_IQs.filter(iq => iq.querySelector(`iq query[xmlns="${Strophe.NS.MAM}"]`)).pop());
             expect(Strophe.serialize(iq_get)).toBe(

src/plugins/rootview/styles/root.scss

@@ -1,5 +1,5 @@
-converse-root.converse-js {
-    &.converse-fullpage,
+converse-root {
+    &.converse-fullscreen,
     &.converse-overlayed,
     &.converse-mobile {
         bottom: 0;
@@ -10,6 +10,11 @@ converse-root.converse-js {
         z-index: 1031; // One more than bootstrap navbar
     }
 
+    &.converse-fullscreen {
+        height: 100vh;
+        width: 100vw;
+    }
+
     &.converse-embedded {
         position: relative;
     }

src/shared/styles/index.scss

@@ -61,7 +61,6 @@ $prefix: 'converse-';
 
 @import "core";
 @import "alerts";
-@import "spinner";
 @import "buttons";
 @import "badges";
 @import "forms";

src/shared/styles/spinner.scss

@@ -1,19 +0,0 @@
-.conversejs {
-
-    .spinner__container {
-        width: 100%;
-    }
-
-    .spinner {
-        animation: spin 2s infinite, linear;
-        width: 1em;
-        display: block;
-        text-align: center;
-        padding: 0.5em 0;
-        font-size: 24px;
-
-        svg {
-            fill: var(--primary-color);
-        }
-    }
-}

src/templates/spinner.js

@@ -1,14 +1,10 @@
 import { html } from 'lit';
+import './styles/spinner.scss';
 
 export default (o = {}) => {
-    if (o.classes?.includes('hor_centered')) {
-        return html`<div class="spinner__container">
-            <converse-icon size="1em" class="fa fa-spinner spinner centered ${o.classes || ''}"></converse-icon>
-        </div>`;
-    } else {
-        return html`<converse-icon
-            size="1em"
-            class="fa fa-spinner spinner centered ${o.classes || ''}"
-        ></converse-icon>`;
-    }
+    return html`<div class="d-flex justify-content-center ${o.class}">
+        <div class="spinner-grow" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>`
 };

src/templates/styles/spinner.scss

@@ -0,0 +1,5 @@
+.spinner-grow {
+    .vertically-centered > & {
+        margin-top: 50vh;
+    }
+}