lazy load the timeline

routes/_components/LazyTimeline.html

@@ -0,0 +1,40 @@
+{{#await promise}}
+<div class="loading-page">
+  {{#if trueValue}} <!-- hack to get the transition to work -->
+    <div transition:fade>
+      <LoadingSpinner />
+    </div>
+  {{/if}}
+</div>
+{{then constructor}}
+<:Component {constructor} :target />
+{{catch error}}
+<div>Component failed to load. Please try refreshing!</div>
+{{/await}}
+<style>
+  .loading-page {
+    width: 100%;
+    min-height: 40vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>
+<script>
+  import { importTimeline } from '../_utils/asyncModules'
+  import LoadingSpinner from './LoadingSpinner.html'
+  import { fade } from 'svelte-transitions'
+
+  export default {
+    data: () => ({
+      promise: importTimeline(),
+      trueValue: true
+    }),
+    components: {
+      LoadingSpinner
+    },
+    transitions: {
+      fade
+    }
+  }
+</script>

routes/_components/LoadingMask.html

@@ -1,9 +1,7 @@
 <div class="loading-container">
   {{#if show}}
   <div transition:fade class="loading-mask">
-    <svg>
+    <LoadingSpinner maskStyle="true"/>
-      <use xlink:href="#fa-spinner" />
-    </svg>
   </div>
   {{/if}}
 </div>
@@ -27,35 +25,17 @@
     opacity: 0.6;
     pointer-events: auto;
   }
-  svg {
-    width: 64px;
-    height: 64px;
-    fill: var(--mask-svg-fill);
-    animation: spin 2s infinite linear;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    25% {
-      transform: rotate(90deg);
-    }
-    50% {
-      transform: rotate(180deg);
-    }
-    75% {
-      transform: rotate(270deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
 </style>
 <script>
   import { fade } from 'svelte-transitions'
+  import LoadingSpinner from './LoadingSpinner.html'
 
   export default {
-    transitions: { fade }
+    transitions: {
+      fade
+    },
+    components: {
+      LoadingSpinner
+    }
   }
 </script>

routes/_components/LoadingSpinner.html

@@ -0,0 +1,33 @@
+<svg class="{{maskStyle ? 'mask-style' : ''}}">
+  <use xlink:href="#fa-spinner" />
+</svg>
+<style>
+  svg {
+    width: 64px;
+    height: 64px;
+    fill: var(--svg-fill);
+    animation: spin 2s infinite linear;
+  }
+
+  svg.mask-style {
+    fill: var(--mask-svg-fill);
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(90deg);
+    }
+    50% {
+      transform: rotate(180deg);
+    }
+    75% {
+      transform: rotate(270deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

routes/_components/Timeline.html

@@ -21,24 +21,9 @@
   import Status from './Status.html'
 
   export default {
-    oncreate: async function () {
-      if (!process.browser) {
-        return
-      }
-      let instanceData = this.store.get('currentInstance')
-      if (!instanceData) {
-        return
-      }
-      let response = fixture
-      // let response = await (await getHomeTimeline(instanceData.instanceName, instanceData.access_token)).json()
-      if (process.env.NODE_ENV !== 'production') {
-        console.log(response)
-      }
-      this.set({'statuses': response})
-    },
     data: () => ({
       target: 'home',
-      statuses: []
+      statuses: fixture
     }),
     store: () => store,
     components: {

routes/_components/Toast.html

@@ -59,8 +59,6 @@
         }
       })
     },
-    ondestroy () {
-    },
     data: () => ({
       text: '',
       shown: false,

routes/_utils/asyncModules.js

@@ -13,7 +13,12 @@ const importToast = () => import(
   /* webpackChunkName: 'toast' */ './toast'
   ).then(mod => mod.toast)
 
+const importTimeline = () => import(
+  /* webpackChunkName: 'Timeline' */ '../_components/Timeline.html'
+  ).then(mod => mod.default)
+
 export {
   importURLSearchParams,
-  importToast
+  importToast,
+  importTimeline
 }

routes/index.html

@@ -4,7 +4,7 @@
 
 <Layout page='home'>
   {{#if $isUserLoggedIn}}
-  <Timeline target='home' />
+  <LazyTimeline target='home' />
   {{else}}
   <NotLoggedInHome/>
   {{/if}}
@@ -14,14 +14,14 @@
 <script>
   import Layout from './_components/Layout.html'
   import NotLoggedInHome from './_components/NotLoggedInHome.html'
-  import Timeline from './_components/Timeline.html'
+  import LazyTimeline from './_components/LazyTimeline.html'
   import { store } from './_utils/store.js'
 
 	export default {
 		store: () => store,
 		components: {
 		  Layout,
-			Timeline,
+      LazyTimeline,
 			NotLoggedInHome
 		}
 	}