improve SSR hiding

routes/_components/HiddenFromSSR.html

@@ -0,0 +1,13 @@
+<div class="{{hidden ? 'hidden' : ''}}">
+  <slot></slot>
+</div>
+<script>
+  export default {
+    data: () => ({
+      hidden: true
+    }),
+    oncreate () {
+      this.set({hidden: !process.browser})
+    }
+  }
+</script>

routes/_components/NotLoggedInHome.html

@@ -1,5 +1,6 @@
+<HiddenFromSSR>
   <FreeTextLayout>
-  <div class="not-logged-in-home {{hidden ? 'hidden' : ''}}">
+    <div class="not-logged-in-home">
       <div class="banner">
         <svg aria-hidden="true" class="logo">
           <use xlink:href="#pinafore-logo" />
@@ -13,6 +14,7 @@
       <p>Don't have an instance? <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a></p>
     </div>
   </FreeTextLayout>
+</HiddenFromSSR>
 <style>
   .not-logged-in-home {
     margin: 10px;
@@ -43,16 +45,12 @@
 </style>
 <script>
   import FreeTextLayout from './FreeTextLayout.html'
+  import HiddenFromSSR from './HiddenFromSSR.html'
 
   export default {
     components: {
-      FreeTextLayout
+      FreeTextLayout,
-    },
+      HiddenFromSSR
-    data: () => ({
-      hidden: true
-    }),
-    oncreate: function () {
-      this.set({hidden: !process.browser})
     }
   }
 </script>

routes/federated.html

@@ -6,11 +6,13 @@
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='federated' />
   {{else}}
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Federated</h1>
 
       <p>Your federated timeline will appear here when logged in.</p>
     </FreeTextLayout>
+  </HiddenFromSSR>
   {{/if}}
 </Layout>
 
@@ -19,13 +21,15 @@
   import LazyTimeline from './_components/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import { store } from './_utils/store.js'
+  import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     store: () => store,
     components: {
       Layout,
       LazyTimeline,
-      FreeTextLayout
+      FreeTextLayout,
+      HiddenFromSSR
     }
   }
 </script>

routes/local.html

@@ -6,11 +6,13 @@
   {{#if $isUserLoggedIn}}
   <LazyTimeline timeline='local' />
   {{else}}
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Local</h1>
 
       <p>Your local timeline will appear here when logged in.</p>
     </FreeTextLayout>
+  </HiddenFromSSR>
   {{/if}}
 </Layout>
 
@@ -19,13 +21,15 @@
   import LazyTimeline from './_components/LazyTimeline.html'
   import FreeTextLayout from './_components/FreeTextLayout.html'
   import { store } from './_utils/store.js'
+  import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     store: () => store,
     components: {
       Layout,
       LazyTimeline,
-      FreeTextLayout
+      FreeTextLayout,
+      HiddenFromSSR
     }
   }
 </script>

routes/notifications.html

@@ -3,21 +3,25 @@
 </:Head>
 
 <Layout page='notifications'>
+  <HiddenFromSSR>
     <FreeTextLayout>
       <h1>Notifications</h1>
 
       <p>Your notifications will appear here when logged in.</p>
     </FreeTextLayout>
+  </HiddenFromSSR>
 </Layout>
 
 <script>
   import Layout from './_components/Layout.html';
   import FreeTextLayout from './_components/FreeTextLayout.html'
+  import HiddenFromSSR from './_components/HiddenFromSSR'
 
   export default {
     components: {
       Layout,
-      FreeTextLayout
+      FreeTextLayout,
+      HiddenFromSSR
     },
   };
 </script>

templates/2xx.html

@@ -18,7 +18,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o
 
 	<noscript>
 		<style>
-			.not-logged-in-home.hidden {
+			.hidden {
 				opacity: 1;
 			}
 		</style>