From a56591fb8e886c96685f687f52eed515bf2cdf26 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 14 Feb 2018 18:37:19 -0800
Subject: [PATCH] fix display of loading mask

---
 routes/_components/LoadingMask.html | 27 ++++++++++++++++-----------
 routes/_utils/loadingMask.js        | 17 +++++++++++++++++
 routes/settings/instances/add.html  |  4 ----
 templates/2xx.html                  |  3 +++
 templates/main.js                   |  1 +
 5 files changed, 37 insertions(+), 15 deletions(-)
 create mode 100644 routes/_utils/loadingMask.js

diff --git a/routes/_components/LoadingMask.html b/routes/_components/LoadingMask.html
index d04ca6ff..82e42262 100644
--- a/routes/_components/LoadingMask.html
+++ b/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
     }
diff --git a/routes/_utils/loadingMask.js b/routes/_utils/loadingMask.js
new file mode 100644
index 00000000..9d1e7e5a
--- /dev/null
+++ b/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 }
diff --git a/routes/settings/instances/add.html b/routes/settings/instances/add.html
index aceea0ed..cca96999 100644
--- a/routes/settings/instances/add.html
+++ b/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,
diff --git a/templates/2xx.html b/templates/2xx.html
index 15733cbe..92c3b165 100644
--- a/templates/2xx.html
+++ b/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 -->
diff --git a/templates/main.js b/templates/main.js
index aabe53c2..a745c0de 100644
--- a/templates/main.js
+++ b/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