fix flash of unstyled content

routes/_components/NotLoggedInHome.html

@@ -1,15 +1,17 @@
 <FreeTextLayout>
-  <div class="banner">
-    <svg aria-hidden="true" class="logo">
-      <use xlink:href="#pinafore-logo" />
-    </svg>
-    <h1>Pinafore</h1>
+  <div class="not-logged-in-home {{hidden ? 'hidden' : ''}}">
+    <div class="banner">
+      <svg aria-hidden="true" class="logo">
+        <use xlink:href="#pinafore-logo" />
+      </svg>
+      <h1>Pinafore</h1>
+    </div>
+    <p>Pinafore is a web client for <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
+
+    <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
+
+    <p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
   </div>
-  <p>Pinafore is a web client for <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>, optimized for speed and simplicity.</p>
-
-  <p>To get started, <a href="/settings/instances/add">log in to an instance</a>.</p>
-
-  <p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
 </FreeTextLayout>
 <style>
   .banner {
@@ -38,9 +40,16 @@
 </style>
 <script>
   import FreeTextLayout from './FreeTextLayout.html'
+
   export default {
     components: {
       FreeTextLayout
+    },
+    data: () => ({
+      hidden: true
+    }),
+    oncreate: function () {
+      this.set({hidden: !process.browser})
     }
   }
 </script>

scss/global.scss

@@ -24,6 +24,7 @@ main {
   background: var(--main-bg);
   border: 1px solid var(--main-border);
   border-radius: 1px;
+  min-height: 50vh;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -103,6 +104,10 @@ ul, li, p {
   margin: 0;
 }
 
+.hidden {
+  opacity: 0;
+}
+
 @media (max-width: 767px) {
   main {
     padding: 5px 5px;

templates/2xx.html

@@ -15,6 +15,14 @@
 		}
 	</script>
 
+	<noscript>
+		<style>
+			.not-logged-in-home.hidden {
+				opacity: 1;
+			}
+		</style>
+	</noscript>
+
 	<!-- Sapper generates a <style> tag containing critical CSS
 	     for the current page. CSS for the rest of the app is
 	     lazily loaded when it precaches secondary pages -->