Add "slow loading" banner if SITE_SLOW environment variable is set

components/App.vue

@@ -23,6 +23,26 @@
   </div>
   <div v-else class="px-5-touch">
     <client-only>
+      <div v-if="slow">
+        <div class="container mt-5">
+          <b-message
+            title="Northern Climate Reports is experiencing slow load times"
+            type="is-warning"
+            aria-close-label="Close message"
+          >
+            <p>
+              We&rsquo;re sorry! Northern Climate Reports is experiencing slower
+              load times than usual. We&rsquo;re working to improve performance
+              as soon as possible, but we don&rsquo;t have an estimated time for
+              completion. Please check back soon, or reach out to us at
+              <a href="mailto:[email protected]"
+                >[email protected]</a
+              >
+              with questions.
+            </p>
+          </b-message>
+        </div>
+      </div>
       <div v-show="!this.reportIsVisible">
         <div class="container mt-5">
           <div class="columns" id="controls">
@@ -77,6 +97,7 @@ export default {
   data() {
     return {
       offline: process.env.offline,
+      slow: process.env.slow,
     }
   },
   computed: {

nuxt.config.js

@@ -114,6 +114,7 @@ export default {
     apiUrl: process.env.SNAP_API_URL || 'https://earthmaps.io',
     localStorageExpiration: 4,
     offline: process.env.SITE_OFFLINE?.toLowerCase() == 'true',
+    slow: process.env.SITE_SLOW?.toLowerCase() == 'true',
   },
 
   // Router customizations