From e3bb16b688e87ff06db75441668fc489bbdd4a59 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 14 Jan 2018 23:24:27 -0800
Subject: [PATCH] lazy load the timeline

---
 routes/_components/LazyTimeline.html   | 40 ++++++++++++++++++++++++++
 routes/_components/LoadingMask.html    | 36 ++++++-----------------
 routes/_components/LoadingSpinner.html | 33 +++++++++++++++++++++
 routes/_components/Timeline.html       | 17 +----------
 routes/_components/Toast.html          |  2 --
 routes/_utils/asyncModules.js          |  7 ++++-
 routes/index.html                      |  6 ++--
 7 files changed, 91 insertions(+), 50 deletions(-)
 create mode 100644 routes/_components/LazyTimeline.html
 create mode 100644 routes/_components/LoadingSpinner.html

diff --git a/routes/_components/LazyTimeline.html b/routes/_components/LazyTimeline.html
new file mode 100644
index 0000000..41cd57d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/LoadingMask.html b/routes/_components/LoadingMask.html
index e6f7e6b..745d5a4 100644
--- a/routes/_components/LoadingMask.html
+++ b/routes/_components/LoadingMask.html
@@ -1,9 +1,7 @@
 <div class="loading-container">
   {{#if show}}
   <div transition:fade class="loading-mask">
-    <svg>
-      <use xlink:href="#fa-spinner" />
-    </svg>
+    <LoadingSpinner maskStyle="true"/>
   </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>
\ No newline at end of file
diff --git a/routes/_components/LoadingSpinner.html b/routes/_components/LoadingSpinner.html
new file mode 100644
index 0000000..24ec64e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html
index 6182a4c..9796842 100644
--- a/routes/_components/Timeline.html
+++ b/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: {
diff --git a/routes/_components/Toast.html b/routes/_components/Toast.html
index 2d9f487..7ae1690 100644
--- a/routes/_components/Toast.html
+++ b/routes/_components/Toast.html
@@ -59,8 +59,6 @@
         }
       })
     },
-    ondestroy () {
-    },
     data: () => ({
       text: '',
       shown: false,
diff --git a/routes/_utils/asyncModules.js b/routes/_utils/asyncModules.js
index 409f5b9..c90e3b0 100644
--- a/routes/_utils/asyncModules.js
+++ b/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
 }
\ No newline at end of file
diff --git a/routes/index.html b/routes/index.html
index e123d7c..d7d9c29 100644
--- a/routes/index.html
+++ b/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
 		}
 	}