Very chunky cards view performance on some devices

[frnsys]

So far only identified iOS Safari

• Significant rendering delay for cards (several seconds before the rest of the cards show up after scrolling)
• Very chunky left/right scrolling and up/down swiping

If we can throttle the javascript code handling swiping/scrolling that could help, i.e. using lodash.debounce: https://dmitripavlutin.com/vue-debounce-throttle/

The other thing that is probably impacting performance is the way we bind Draggable events. Every card that's rendered adds several event bindings to the document; we should probably dynamically add/remove the bindings when cards come into/leave the focused position. And use touch device detection to figure out what bindings to use in the first place.

Also, use passive event listeners: https://www.digitalocean.com/community/tutorials/js-speed-up-scroll-events

Another potential issue is that Draggable has a <slot> for the card contents. Best as I can tell changes to the parent Draggable also causes the <slot> to re-render, i.e. the whole card re-renders on dragging, or at least at the start of a drag (when we change the state variable this.dragging = true): https://github.com/vuejs/vue/issues/6898 Just tested this and I'm not seeing re-renders in the child card when the parent Draggable is dragged.

• [x] Remove redundant event handlers in Draggable.vue
• [x] Remove redundant scroll checking in Cards.vue
• [x] Debounce scroll event
• [x] Make text scaling non-blocking

[frnsys]

Still not resolved unfortunately.

Trying to optimize more of the interaction code.

One possible culprit is the use of getBoundingClientRect which can trigger reflows (expensive). So will look into if we can minimize them (e.g. via caching) or replace them altogether with a less intensive method. See https://toruskit.com/blog/how-to-get-element-bounds-without-reflow/#call-getboundingclientrect()

I tried debouncing the drag interaction in Draggable.vue but it kind of breaks things.

Also, instead of modifying el.style.top etc, use el.style.transform to avoid triggering layout recalculations: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

[entityleak]

After doing some testing - the issue where card dragging (up and down) wasnt possible at all (i.e. doesn't move at all) - was on brave browser on iOS for unknown reasons. It's built on chromium so idk why this is the case.

[entityleak]

One more thing I noticed: on mobile process cards, sometimes they would not reset to vertical center position after letting go of them. Doesn't seem to happen on project cards.

[frnsys]

After testing on an iPhone 7 w/ Safari (iOS 15.3.1) this seems to be resolved