fix display of loading mask

routes/_components/LoadingMask.html

@@ -1,10 +1,12 @@
-<div class="loading-container {{shown ? 'loading-container-shown' : ''}}">
-  <div class="loading-mask">
-    <LoadingSpinner maskStyle="true"/>
-  </div>
+<div class="loading-mask-container {{shown ? 'loading-mask-container-shown' : ''}}">
+  {{#if shown}}
+    <div class="loading-mask">
+      <LoadingSpinner maskStyle="true"/>
+    </div>
+  {{/if}}
 </div>
 <style>
-  .loading-container {
+  .loading-mask-container {
     left: 0;
     right: 0;
     top: 0;
@@ -12,9 +14,12 @@
     position: fixed;
     z-index: 100;
     pointer-events: none;
+    opacity: 0;
+    transition: opacity 333ms linear;
   }
-  .loading-container.loading-container-shown {
+  .loading-mask-container.loading-mask-container-shown {
     pointer-events: auto;
+    opacity: 0.6;
   }
   .loading-mask {
     width: 100%;
@@ -23,17 +28,17 @@
     align-items: center;
     justify-content: center;
     background: var(--mask-bg);
-    opacity: 0;
-    transition: opacity 333ms linear;
-  }
-  .loading-container-shown .loading-mask {
-    opacity: 0.6;
   }
 </style>
 <script>
   import LoadingSpinner from './LoadingSpinner.html'
+  import { store } from '../_store/store'
 
   export default {
+    store: () => store,
+    computed: {
+      shown: ($logInToInstanceLoading) => $logInToInstanceLoading
+    },
     components: {
       LoadingSpinner
     }

routes/_utils/loadingMask.js

@@ -0,0 +1,17 @@
+import LoadingMask from '../_components/LoadingMask.html'
+
+let loadingMask
+
+if (process.browser) {
+  loadingMask = new LoadingMask({
+    target: document.querySelector('#loading-mask')
+  })
+  if (process.env.NODE_ENV !== 'production') {
+    window.loadingMask = loadingMask // for debugging
+  }
+} else {
+  loadingMask = {
+  }
+}
+
+export { loadingMask }

routes/settings/instances/add.html

@@ -6,8 +6,6 @@
   <SettingsLayout page='settings/instances/add' label="Add an Instance">
     <h1 id="add-an-instance-h1">Add an Instance</h1>
 
-    <LoadingMask shown="{{$logInToInstanceLoading}}"/>
-
     {{#if $isUserLoggedIn}}
     <p>Connect to an instance to log in.</p>
     {{else}}
@@ -74,7 +72,6 @@
   import Layout from '../../_components/Layout.html';
   import SettingsLayout from '../_components/SettingsLayout.html'
   import { store } from '../../_store/store'
-  import LoadingMask from '../../_components/LoadingMask'
   import { logInToInstance, handleOauthCode } from '../../_actions/addInstance'
   import ExternalLink from '../../_components/ExternalLink.html'
 
@@ -88,7 +85,6 @@
     components: {
       Layout,
       SettingsLayout,
-      LoadingMask,
       ExternalLink
     },
     store: () => store,

templates/2xx.html

@@ -102,6 +102,9 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
   <!-- ModalDialog.html gets rendered here -->
   <div id="modal-dialog" aria-hidden="true"></div>
 
+  <!-- LoadingMask.html gets rendered here -->
+  <div id="loading-mask" aria-hidden="true"></div>
+
 	<!-- Sapper creates a <script> tag containing `templates/main.js`
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->

templates/main.js

@@ -3,6 +3,7 @@ import { loadPolyfills } from '../routes/_utils/loadPolyfills'
 import '../routes/_utils/offlineNotification'
 import '../routes/_utils/serviceWorkerClient'
 import '../routes/_utils/historyEvents'
+import '../routes/_utils/loadingMask'
 
 loadPolyfills().then(() => {
   // `routes` is an array of route objects injected by Sapper