From c49c80305c9ad7607f05380dddf540d199ffac41 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 13 Jan 2018 20:33:14 -0800
Subject: [PATCH] fix flash of unstyled content

---
 routes/_components/NotLoggedInHome.html | 29 ++++++++++++++++---------
 scss/global.scss                        |  5 +++++
 templates/2xx.html                      |  8 +++++++
 3 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/routes/_components/NotLoggedInHome.html b/routes/_components/NotLoggedInHome.html
index 11d5e440..6703566b 100644
--- a/routes/_components/NotLoggedInHome.html
+++ b/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>
\ No newline at end of file
diff --git a/scss/global.scss b/scss/global.scss
index 71e05664..9b8ecf8c 100644
--- a/scss/global.scss
+++ b/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;
diff --git a/templates/2xx.html b/templates/2xx.html
index 35e72566..40d0018d 100644
--- a/templates/2xx.html
+++ b/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 -->