Reset the whole recycler

src/components/Photo.vue

@@ -23,7 +23,6 @@
                 :src="getSrc()"
                 :key="data.fileid"
 
-                ref="image"
                 @click="click"
                 @error="error"
                 @load="load"
@@ -53,7 +52,6 @@ export default class Photo extends Mixins(GlobalMixin) {
     @Prop() data: IPhoto;
     @Prop() rowHeight: number;
     @Prop() day: IDay;
-    @Prop() state: number;
 
     @Emit('reprocess') emitReprocess(remIds: Set<number>, updatedDays: Set<IDay>) {}
     @Emit('select') emitSelect(data: IPhoto) {}
@@ -78,13 +76,6 @@ export default class Photo extends Mixins(GlobalMixin) {
         return getPreviewUrl(this.data.fileid, this.data.etag);
     }
 
-    mounted() {
-        // Check if already loaded
-        if ((<HTMLImageElement>this.$refs.image).complete) {
-            this.load();
-        }
-    }
-
     /** Image loaded successfully */
     load() {
         this.data.flag |= this.c.FLAG_LOADED;

src/components/Timeline.vue

@@ -2,6 +2,7 @@
     <div class="container" ref="container" :class="{ 'icon-loading': loading }">
         <!-- Main recycler view for rows -->
         <RecycleScroller
+            :key="state"
             ref="recycler"
             class="recycler"
             :items="list"
@@ -22,15 +23,12 @@
 
                 <div class="photo" v-for="photo of item.photos" :key="photo.fileid">
                     <Folder v-if="photo.isfolder"
-                            :key="state"
                             :data="photo"
                             :rowHeight="rowHeight" />
                     <Photo v-else
-                            :key="state"
                             :data="photo"
                             :rowHeight="rowHeight"
                             :day="item.day"
-                            :state="state"
                             @select="selectPhoto"
                             @reprocess="deleteFromViewWithAnimation"
                             @clickImg="clickPhoto" />
@@ -187,26 +185,35 @@ export default class Timeline extends Mixins(GlobalMixin) {
     private state = Math.random();
 
     mounted() {
-        this.handleResize();
+        this.createState();
-        this.fetchDays();
-
-        // Timeline recycler init
-        (this.$refs.recycler as any).$el.addEventListener('scroll', this.scrollPositionChange, false);
-        this.scrollPositionChange();
     }
 
     @Watch('$route')
-    routeChange(from: any, to: any) {
+    async routeChange(from: any, to: any) {
-        this.resetState();
+        await this.resetState();
-        this.fetchDays();
+        await this.createState();
-    };
+    }
 
     beforeDestroy() {
         this.resetState();
     }
 
+    /** Create new state */
+    async createState() {
+        // Wait for one tick before doing anything
+        await this.$nextTick();
+
+        // Get data
+        this.fetchDays();
+
+        // Timeline recycler init
+        this.handleResize();
+        (this.$refs.recycler as any).$el.addEventListener('scroll', this.scrollPositionChange, false);
+        this.scrollPositionChange();
+    }
+
     /** Reset all state */
-    resetState() {
+    async resetState() {
         this.clearSelection();
         this.loading = true;
         this.list = [];