From 4ca809d7b2f12c79b9de69d7792ec6e9c051f36e Mon Sep 17 00:00:00 2001
From: Varun Patil <varunpatil@ucla.edu>
Date: Sun, 16 Oct 2022 14:08:15 -0700
Subject: [PATCH] Prevent deletion glitches

---
 src/components/Timeline.vue | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/Timeline.vue b/src/components/Timeline.vue
index ae32feb4..2484e273 100644
--- a/src/components/Timeline.vue
+++ b/src/components/Timeline.vue
@@ -639,8 +639,9 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
      *
      * @param dayId id of day
      * @param data photos
+     * @param isAnimating prevents glitches due to height changes
      */
-    processDay(dayId: number, data: IPhoto[]) {
+    processDay(dayId: number, data: IPhoto[], isAnimating=false) {
         const head = this.heads[dayId];
         const day = head.day;
         this.loadedDays.add(dayId);
@@ -717,8 +718,8 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             const jH = Math.round(jbox.height);
             const delta = jH - row.size;
             // If the difference is too small, it's not worth risking an adjustment
-            // especially on square layouts on mobile
-            if (Math.abs(delta) > 5) {
+            // especially on square layouts on mobile. Also don't do this if animating.
+            if (Math.abs(delta) > 5 && !isAnimating) {
                 rowSizeDelta += delta;
                 row.size = jH;
             }
@@ -785,11 +786,13 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
             }
 
             // Scroll to the same actual position if the added rows
-            // were above the current scroll position
-            const recycler: any = this.$refs.recycler;
-            const midIndex = (recycler.$_startIndex + recycler.$_endIndex) / 2;
-            if (midIndex > headIdx) {
-                this.setScrollY(scrollY + rowSizeDelta);
+            // were above the current scroll position, unless animating
+            if (!isAnimating) {
+                const recycler: any = this.$refs.recycler;
+                const midIndex = (recycler.$_startIndex + recycler.$_endIndex) / 2;
+                if (midIndex > headIdx) {
+                    this.setScrollY(scrollY + rowSizeDelta);
+                }
             }
         }
     }
@@ -878,7 +881,8 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
 
         // Reflow all touched days
         for (const day of updatedDays) {
-            this.processDay(day.dayid, day.detail.filter(p => !delPhotosSet.has(p)));
+            const newDetail = day.detail.filter(p => !delPhotosSet.has(p));
+            this.processDay(day.dayid, newDetail, true);
         }
 
         // Enter from right all photos that exited left
@@ -927,6 +931,7 @@ export default class Timeline extends Mixins(GlobalMixin, UserConfig) {
     cursor: pointer;
     vertical-align: top;
     height: 100%;
+    transition: width 0.2s ease-in-out; // reflow justification
 }
 
 .head-row {