Always render spinner via lit-html

src/converse-chatview.js

@@ -12,7 +12,7 @@ import log from "@converse/headless/log";
 import tpl_chatbox from "templates/chatbox.js";
 import tpl_chatbox_head from "templates/chatbox_head.js";
 import tpl_chatbox_message_form from "templates/chatbox_message_form.js";
-import tpl_spinner from "templates/spinner.html";
+import tpl_spinner from "templates/spinner.js";
 import tpl_toolbar from "templates/toolbar.js";
 import tpl_user_details_modal from "templates/user_details_modal.js";
 import { BootstrapModal } from "./converse-modal.js";
@@ -421,11 +421,12 @@ export const ChatBoxView = View.extend({
 
     addSpinner (append=false) {
         if (this.el.querySelector('.spinner') === null) {
+            const el = u.getElementFromTemplateResult(tpl_spinner());
             if (append) {
-                this.content.insertAdjacentHTML('beforeend', tpl_spinner());
+                this.content.insertAdjacentElement('beforeend', el);
                 this.scrollDown();
             } else {
-                this.content.insertAdjacentHTML('afterbegin', tpl_spinner());
+                this.content.insertAdjacentElement('afterbegin', el);
             }
         }
     },

src/converse-muc-views.js

@@ -22,7 +22,7 @@ import tpl_muc_config_form from "templates/muc_config_form.js";
 import tpl_muc_password_form from "templates/muc_password_form.js";
 import tpl_muc_sidebar from "templates/muc_sidebar.js";
 import tpl_room_panel from "templates/room_panel.html";
-import tpl_spinner from "templates/spinner.html";
+import tpl_spinner from "templates/spinner.js";
 import { ChatBoxView } from "./converse-chatview";
 import { Model } from '@converse/skeletor/src/model.js';
 import { View } from '@converse/skeletor/src/view.js';
@@ -1315,7 +1315,10 @@ export const ChatRoomView = ChatBoxView.extend({
         sizzle('.spinner', this.el).forEach(u.removeElement);
         this.hideChatRoomContents();
         const container_el = this.el.querySelector('.chatroom-body');
-        container_el.insertAdjacentHTML('afterbegin', tpl_spinner());
+        container_el.insertAdjacentElement(
+            'afterbegin',
+            u.getElementFromTemplateResult(tpl_spinner())
+        );
     },
 
     /**

src/converse-register.js

@@ -7,18 +7,19 @@
  * @license Mozilla Public License (MPLv2)
  */
 import "converse-controlbox";
-import { __ } from './i18n';
-import { View } from "@converse/skeletor/src/view";
-import { pick } from "lodash-es";
-import { _converse, api, converse } from "@converse/headless/converse-core";
 import log from "@converse/headless/log";
 import tpl_form_input from "templates/form_input.html";
 import tpl_form_username from "templates/form_username.html";
 import tpl_register_panel from "templates/register_panel.html";
 import tpl_registration_form from "templates/registration_form.html";
 import tpl_registration_request from "templates/registration_request.html";
-import tpl_spinner from "templates/spinner.html";
+import tpl_spinner from "templates/spinner.js";
 import utils from "@converse/headless/utils/form";
+import { View } from "@converse/skeletor/src/view";
+import { __ } from './i18n';
+import { _converse, api, converse } from "@converse/headless/converse-core";
+import { pick } from "lodash-es";
+import { render } from 'lit-html';
 
 // Strophe methods for building stanzas
 const { Strophe, sizzle, $iq } = converse.env;
@@ -352,7 +353,7 @@ converse.plugins.add('converse-register', {
 
             showSpinner () {
                 const form = this.el.querySelector('form');
-                form.innerHTML = tpl_spinner();
+                render(tpl_spinner(), form);
                 this.model.set('registration_form_rendered', false);
                 return this;
             },

src/modals/muc-list.js

@@ -3,7 +3,7 @@ import sizzle from 'sizzle';
 import st from "@converse/headless/utils/stanza";
 import tpl_list_chatrooms_modal from "templates/list_chatrooms_modal.js";
 import tpl_room_description from "templates/room_description.html";
-import tpl_spinner from "templates/spinner.html";
+import tpl_spinner from "templates/spinner.js";
 import { BootstrapModal } from "../converse-modal.js";
 import { Strophe, $iq } from 'strophe.js/src/strophe';
 import { __ } from '../i18n';
@@ -70,7 +70,10 @@ function toggleRoomInfo (ev) {
         u.slideIn(div_el).then(u.removeElement)
         parent_el.querySelector('a.room-info').classList.remove('selected');
     } else {
-        parent_el.insertAdjacentHTML('beforeend', tpl_spinner());
+        parent_el.insertAdjacentElement(
+            'beforeend',
+            u.getElementFromTemplateResult(tpl_spinner())
+        );
         api.disco.info(ev.target.getAttribute('data-room-jid'), null)
             .then(stanza => insertRoomInfo(parent_el, stanza))
             .catch(e => log.error(e));

src/templates/spinner.html

@@ -1 +0,0 @@
-<span class="spinner fa fa-spinner centered"/>

src/utils/html.js

@@ -20,7 +20,7 @@ import tpl_select_option from "../templates/select_option.html";
 import tpl_video from "../templates/video.js";
 import u from "../headless/utils/core";
 import { api } from  "@converse/headless/converse-core";
-import { html } from "lit-html";
+import { html, render } from "lit-html";
 import { isFunction } from "lodash-es";
 
 const APPROVED_URL_PROTOCOLS = ['http', 'https', 'xmpp', 'mailto'];
@@ -252,6 +252,12 @@ u.removeElement = function (el) {
     return el;
 }
 
+u.getElementFromTemplateResult = function (tr) {
+    const div = document.createElement('div');
+    render(tr, div);
+    return div.firstElementChild;
+}
+
 u.showElement = el => {
     u.removeClass('collapsed', el);
     u.removeClass('hidden', el);