diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue index 2852c029..63e0d86f 100644 --- a/src/components/Timeline.vue +++ b/src/components/Timeline.vue @@ -13,7 +13,7 @@ @resize="handleResizeWithDelay" >

- {{ item.name }} + {{ getHeadName(item) }}

{ + 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)) { - this.reflowTimeline(); + if (addedRow || spliceCount > 0) { this.handleViewSizeChange(); } }, @@ -922,7 +942,6 @@ export default { }); // Reflow timeline - this.reflowTimeline(); this.handleViewSizeChange(); }, },