wip

src/components/NewsItem.vue

@@ -8,3 +8,8 @@ export default {
   props: ['item']
 }
 </script>
+
+<style lang="stylus">
+.news-item
+  background-color #fff
+</style>

src/components/NewsList.vue

@@ -41,11 +41,14 @@ export default {
   },
 
   data () {
+    const isInitialRender = !this.$root._isMounted
     return {
       loading: false,
       transition: 'slide-left',
-      displayedPage: Number(this.$store.state.route.params.page) || 1,
-      displayedItems: this.$store.getters.activeItems
+      // if this is the initial render, directly render with the store state
+      // otherwise this is a page switch, start with blank and wait for data load
+      displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
+      displayedItems: isInitialRender ? this.$store.getters.activeItems : []
     }
   },
 
@@ -63,7 +66,9 @@ export default {
   },
 
   mounted () {
-    this.loadItems(this.page, -1)
+    if (this.$root._isMounted) {
+      this.loadItems(this.page)
+    }
   },
 
   watch: {
@@ -73,7 +78,7 @@ export default {
   },
 
   methods: {
-    loadItems (to, from) {
+    loadItems (to = this.page, from = -1) {
       this.loading = true
       this.$store.dispatch('FETCH_DATA_FOR_TYPE', {
         type: this.type

src/store/api.js

@@ -33,7 +33,7 @@ function createServerSideAPI () {
     })
   })
 
-  // warm the cache every 15 min, since the front page changes quite often
+  // warm the front page cache every 15 min
   warmCache()
   function warmCache () {
     fetchItems((api.__ids__.top || []).slice(0, 30))
@@ -57,14 +57,6 @@ export function fetchIdsByType (type) {
     : fetch(`${type}stories`)
 }
 
-export function watchTopIds (cb) {
-  api.child(`topstories`).on('value', snapshot => {
-    const ids = snapshot.val()
-    api.__ids__ && (api.__ids__.top = ids)
-    cb(ids)
-  })
-}
-
 export function fetchItem (id, forceRefresh) {
   if (!forceRefresh && cache.get(id)) {
     return Promise.resolve(cache.get(id))

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import { watchTopIds, fetchIdsByType, fetchItems } from './api'
+import { fetchIdsByType, fetchItems } from './api'
 
 Vue.use(Vuex)