Merge branch 'fix/block-misclicks-when-timeline-shifts' into 'develop'

block clicks for a second on timeline when timeline moves

See merge request pleroma/pleroma-fe!1266

CHANGELOG.md

@@ -13,6 +13,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Fixed chat messages sometimes getting lost when you receive a message at the same time
 - Fixed clicking NSFW hider through status popover
 
+### Changed
+- Clicking immediately when timeline shifts is now blocked to prevent misclicks
+
 ### Added
 - Import/export a muted users
 - Proper handling of deletes when using websocket streaming

src/components/timeline/timeline.js

@@ -2,7 +2,7 @@ import Status from '../status/status.vue'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
-import { throttle, keyBy } from 'lodash'
+import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
@@ -40,7 +40,8 @@ const Timeline = {
       paused: false,
       unfocused: false,
       bottomedOut: false,
-      virtualScrollIndex: 0
+      virtualScrollIndex: 0,
+      blockingClicks: false
     }
   },
   components: {
@@ -70,8 +71,10 @@ const Timeline = {
       }
     },
     classes () {
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked'])
       return {
-        root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
+        root: rootClasses,
         header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
         body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
         footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
@@ -130,6 +133,15 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
+    stopBlockingClicks: debounce(function () {
+      this.blockingClicks = false
+    }, 1000),
+    blockClicksTemporarily () {
+      if (!this.blockingClicks) {
+        this.blockingClicks = true
+      }
+      this.stopBlockingClicks()
+    },
     handleShortKey (e) {
       // Ignore when input fields are focused
       if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
@@ -141,6 +153,7 @@ const Timeline = {
         this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
         this.fetchOlderStatuses()
       } else {
+        this.blockClicksTemporarily()
         this.$store.commit('showNewStatuses', { timeline: this.timelineName })
         this.paused = false
       }

src/components/timeline/timeline.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'timeline']">
+  <div :class="[classes.root, 'Timeline']">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
       <div
@@ -107,10 +107,14 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
+.Timeline {
   .loadmore-text {
     opacity: 1;
   }
+
+  &.-blocked {
+    pointer-events: none;
+  }
 }
 
 .timeline-heading {