Improve scroller performance

.github/workflows/e2e.yaml

@@ -24,6 +24,7 @@ jobs:
       - name: Build vue app
         run: |
           make dev-setup
+          make patch-external
           make build-js-production
           zip -r vue.zip js/
 
@@ -40,8 +41,8 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ['7.4']
+        php-versions: ["7.4"]
-        server-versions: ['stable25']
+        server-versions: ["stable25"]
 
     services:
       mysql:
@@ -100,7 +101,6 @@ jobs:
           name: report-mysql-${{ matrix.php-versions }}-${{ matrix.server-versions }}
           path: apps/${{ env.APP_NAME }}/playwright-report
 
-
   pgsql:
     runs-on: ubuntu-latest
     needs: vue
@@ -109,8 +109,8 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ['7.4']
+        php-versions: ["7.4"]
-        server-versions: ['stable25']
+        server-versions: ["stable25"]
 
     services:
       postgres:
@@ -181,8 +181,8 @@ jobs:
       # do not stop on another job's failure
       fail-fast: false
       matrix:
-        php-versions: ['7.4']
+        php-versions: ["7.4"]
-        server-versions: ['stable25']
+        server-versions: ["stable25"]
 
     steps:
       - name: Checkout server
@@ -231,4 +231,3 @@ jobs:
         with:
           name: report-sqlite-${{ matrix.php-versions }}-${{ matrix.server-versions }}
           path: apps/${{ env.APP_NAME }}/playwright-report
-

.github/workflows/release.yaml

@@ -24,6 +24,7 @@ jobs:
       - name: Build
         run: |
           make dev-setup
+          make patch-external
           make build-js-production
           ./scripts/bundle.sh
 

Makefile

@@ -26,6 +26,9 @@ build-js:
 build-js-production:
 	rm -f js/* && npm run build
 
+patch-external:
+	patch -p1 < patches/scroller.patch
+
 watch-js:
 	npm run watch
 

package-lock.json

@@ -23,7 +23,7 @@
         "vue-material-design-icons": "^5.1.2",
         "vue-property-decorator": "^9.1.2",
         "vue-router": "^3.5.4",
-        "vue-virtual-scroller": "^1.1.2",
+        "vue-virtual-scroller": "1.1.2",
         "webdav": "^4.11.0"
       },
       "devDependencies": {

package.json

@@ -43,7 +43,7 @@
     "vue-material-design-icons": "^5.1.2",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "^3.5.4",
-    "vue-virtual-scroller": "^1.1.2",
+    "vue-virtual-scroller": "1.1.2",
     "webdav": "^4.11.0"
   },
   "browserslist": [

patches/scroller.patch

@@ -0,0 +1,54 @@
+--- ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js	2022-10-29 15:40:12.517184534 -0700
++++ ./node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js	2022-10-29 15:40:42.814432774 -0700
+@@ -99,6 +99,10 @@
+       type: Boolean,
+       default: false
+     },
++    updateInterval: {
++      type: Number,
++      default: 0,
++    },
+     skipHover: {
+       type: Boolean,
+       default: false
+@@ -262,7 +266,9 @@
+     handleScroll(event) {
+       if (!this.$_scrollDirty) {
+         this.$_scrollDirty = true;
+-        requestAnimationFrame(() => {
++        if (this.$_updateTimeout) return
++
++        const requestUpdate = () => requestAnimationFrame(() => {
+           this.$_scrollDirty = false;
+           const {
+             continuous
+@@ -272,9 +278,19 @@
+           // When non continous scrolling is ending, we force a refresh
+           if (!continuous) {
+             clearTimeout(this.$_refreshTimout);
+-            this.$_refreshTimout = setTimeout(this.handleScroll, 100);
++            this.$_refreshTimout = setTimeout(this.handleScroll, this.updateInterval + 100);
+           }
+         });
++
++        requestUpdate()
++
++        // Schedule the next update with throttling
++        if (this.updateInterval) {
++          this.$_updateTimeout = setTimeout(() => {
++            this.$_updateTimeout = 0
++            if (this.$_scrollDirty) requestUpdate();
++          }, this.updateInterval)
++        }
+       }
+     },
+     handleVisibilityChange(isVisible, entry) {
+@@ -505,7 +521,7 @@
+       // After the user has finished scrolling
+       // Sort views so text selection is correct
+       clearTimeout(this.$_sortTimer);
+-      this.$_sortTimer = setTimeout(this.sortViews, 300);
++      this.$_sortTimer = setTimeout(this.sortViews, this.updateInterval + 300);
+       return {
+         continuous
+       };

src/components/ScrollerManager.vue

@@ -83,9 +83,11 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
   /** Scrolling recycler timer */
   private scrollingRecyclerTimer = null as number | null;
   /** View size reflow timer */
-  private reflowRequest = false;
+  private reflowRequest!: boolean;
   /** Tick adjust timer */
-  private adjustRequest = false;
+  private adjustRequest!: boolean;
+  /** Recycler scrolling throttle */
+  private recyclerScrollDirty!: boolean;
 
   /** Get the visible ticks */
   get visibleTicks() {
@@ -115,6 +117,17 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
 
   /** Recycler scroll event, must be called by timeline */
   public recyclerScrolled() {
+    if (!this.recyclerScrollDirty) {
+      this.recyclerScrollDirty = true;
+      window.setTimeout(() => {
+        this.recyclerScrollDirty = false;
+        requestAnimationFrame(this.updateFromRecyclerScroll);
+      }, 100);
+    }
+  }
+
+  /** Update cursor position from recycler scroll position */
+  public updateFromRecyclerScroll() {
     // Ignore if not initialized
     if (!this.ticks.length) return;
 
@@ -556,6 +569,7 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
     min-width: 100%;
     min-height: 1.5px;
     will-change: transform;
+    transition: transform 0.1s linear;
 
     &.st {
       font-size: 0.75em;
@@ -579,8 +593,11 @@ export default class ScrollerManager extends Mixins(GlobalMixin) {
       }
     }
   }
-  &:hover > .cursor.st {
+  &:hover > .cursor {
+    transition: none;
+    &.st {
       opacity: 1;
     }
+  }
 }
 </style>

src/components/Timeline.vue

@@ -26,11 +26,12 @@
       :class="{ empty: list.length === 0 }"
       :items="list"
       :emit-update="true"
-      :buffer="400"
+      :buffer="800"
       :skipHover="true"
       key-field="id"
       size-field="size"
       type-field="type"
+      :updateInterval="100"
       @update="scrollChange"
       @resize="handleResizeWithDelay"
     >