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();
},
},