Speed up processDays

src/components/Timeline.vue

@@ -13,7 +13,7 @@
             @resize="handleResizeWithDelay"
         >
             <h1 v-if="item.head" class="head-row" :class="{ 'first': item.id === 1 }">
-                {{ item.name }}
+                {{ getHeadName(item) }}
             </h1>
 
             <div v-else
@@ -164,6 +164,8 @@ export default {
             scrollTimer: null,
             /** Resizing timer */
             resizeTimer: null,
+            /** View size reflow timer */
+            viewSizeChangeTimer: null,
             /** Is mobile layout */
             isMobile: false,
 
@@ -259,7 +261,14 @@ export default {
 
         /** Handle change in rows and view size */
         handleViewSizeChange() {
-            setTimeout(() => {
+            if (this.viewSizeChangeTimer) {
+                return;
+            }
+
+            this.viewSizeChangeTimer = setTimeout(() => {
+                this.viewSizeChangeTimer = null;
+                this.reflowTimeline();
+
                 this.viewHeight = this.$refs.recycler.$refs.wrapper.clientHeight;
 
                 // Compute timeline tick positions
@@ -425,6 +434,34 @@ export default {
             return url;
         },
 
+        /** Get name of header */
+        getHeadName(head) {
+            // Check cache
+            if (head.name) {
+                return head.name;
+            }
+
+            // Special headers
+            if (head.dayId === -0.1) {
+                head.name = "Folders";
+                return head.name;
+            }
+
+            // Make date string
+            // The reason this function is separate from processDays is
+            // because this call is terribly slow even on desktop
+            const dateTaken = new Date(Number(head.dayId)*86400*1000);
+            let name = dateTaken.toLocaleDateString("en-US", { dateStyle: 'full', timeZone: 'UTC' });
+            if (dateTaken.getUTCFullYear() === new Date().getUTCFullYear()) {
+                // hack: remove last 6 characters of date string
+                name = name.substring(0, name.length - 6);
+            }
+
+            // Cache and return
+            head.name = name;
+            return head.name;
+        },
+
         /** Fetch timeline main call */
         async fetchDays() {
             let url = API_ROUTES.DAYS;
@@ -439,11 +476,11 @@ export default {
             const res = await axios.get(generateUrl(this.appendQuery(url), params));
             const data = res.data;
             if (this.state !== startState) return;
-            await this.processDays(data);
+            this.processDays(data);
         },
 
         /** Process the data for days call including folders */
-        async processDays(data) {
+        processDays(data) {
             const list = [];
             const heads = {};
 
@@ -456,23 +493,9 @@ export default {
                     continue;
                 }
 
-                // Make date string
-                const dateTaken = new Date(Number(day.dayid)*86400*1000);
-                let dateStr = dateTaken.toLocaleDateString("en-US", { dateStyle: 'full', timeZone: 'UTC' });
-                if (dateTaken.getUTCFullYear() === new Date().getUTCFullYear()) {
-                    // hack: remove last 6 characters of date string
-                    dateStr = dateStr.substring(0, dateStr.length - 6);
-                }
-
-                // Special headers
-                if (day.dayid === -0.1) {
-                    dateStr = "Folders";
-                }
-
                 // Add header to list
                 const head = {
                     id: ++this.numRows,
-                    name: dateStr,
                     size: 40,
                     head: true,
                     dayId: day.dayid,
@@ -508,7 +531,6 @@ export default {
             }
 
             // Fix view height variable
-            this.reflowTimeline();
             this.handleViewSizeChange();
             this.loading = false;
         },
@@ -535,7 +557,7 @@ export default {
                 const day = this.days.find(d => d.dayid === dayId);
                 day.detail = data;
                 day.count = data.length;
-                this.processDay(day, true);
+                this.processDay(day);
             } catch (e) {
                 console.error(e);
             }
@@ -596,9 +618,8 @@ export default {
          * Do not auto reflow if you plan to cal the reflow function later.
          *
          * @param {any} day Day object
-         * @param {boolean} autoReflowTimeline Whether to reflow timeline if row changed
          */
-        processDay(day, autoReflowTimeline = false) {
+        processDay(day) {
             const dayId = day.dayid;
             const data = day.detail;
 
@@ -680,8 +701,7 @@ export default {
             // This will be true even if the head is being spliced
             // because one row is always removed in that case
             // So just reflow the timeline here
-            if (autoReflowTimeline && (addedRow || spliceCount > 0)) {
+            if (addedRow || spliceCount > 0) {
-                this.reflowTimeline();
                 this.handleViewSizeChange();
             }
         },
@@ -922,7 +942,6 @@ export default {
             });
 
             // Reflow timeline
-            this.reflowTimeline();
             this.handleViewSizeChange();
         },
     },