From 1403f20f9feda44206b35f5b303652facd5e2011 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 27 Oct 2020 12:59:50 +0200
Subject: [PATCH 1/4] block clicks for a second when timeline moves

---
 src/components/timeline/timeline.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 17680542..25fa3e41 100644
--- a/src/components/timeline/timeline.js
+++ b/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'
 
 export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => {
   const ids = []
@@ -34,7 +34,8 @@ const Timeline = {
       paused: false,
       unfocused: false,
       bottomedOut: false,
-      virtualScrollIndex: 0
+      virtualScrollIndex: 0,
+      blockingClicks: false
     }
   },
   components: {
@@ -124,6 +125,21 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
+    blockClickEvent (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    },
+    stopBlockingClicks: debounce(function () {
+      this.blockingClicks = false
+      this.$el && this.$el.removeEventListener('click', this.blockClickEvent, true)
+    }, 1000),
+    blockClicksTemporarily () {
+      if (!this.blockingClicks) {
+        this.$el.addEventListener('click', this.blockClickEvent, true)
+        this.blockingClicks = true
+      }
+      this.stopBlockingClicks()
+    },
     handleShortKey (e) {
       // Ignore when input fields are focused
       if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return
@@ -135,6 +151,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
       }

From 85dc4002a1c96bbaf3c2fc3614c55cb57c574072 Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Tue, 27 Oct 2020 13:17:49 +0200
Subject: [PATCH 2/4] update changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 99f601a5..1a7cf9a7 100644
--- a/CHANGELOG.md
+++ b/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

From 7007659e05842dc06eb2c13eddaba6ab657df5ea Mon Sep 17 00:00:00 2001
From: Shpuld Shpuldson <shp@cock.li>
Date: Wed, 28 Oct 2020 08:53:23 +0200
Subject: [PATCH 3/4] change input blocking to use css

---
 src/components/timeline/timeline.js  | 10 +++-------
 src/components/timeline/timeline.vue |  9 +++++++--
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 25fa3e41..ea290fde 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -65,8 +65,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'] : [])
@@ -125,17 +127,11 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
-    blockClickEvent (e) {
-      e.stopPropagation()
-      e.preventDefault()
-    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
-      this.$el && this.$el.removeEventListener('click', this.blockClickEvent, true)
     }, 1000),
     blockClicksTemporarily () {
       if (!this.blockingClicks) {
-        this.$el.addEventListener('click', this.blockClickEvent, true)
         this.blockingClicks = true
       }
       this.stopBlockingClicks()
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c1e2f44b..234ca2d2 100644
--- a/src/components/timeline/timeline.vue
+++ b/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
@@ -103,10 +103,15 @@
 <style lang="scss">
 @import '../../_variables.scss';
 
-.timeline {
+.Timeline {
   .loadmore-text {
     opacity: 1;
   }
+
+  &.-blocked {
+    pointer-events: none;
+    cursor: wait;
+  }
 }
 
 .timeline-heading {

From 6d7ecd7d800450ab07cb2895d4af96ab13849ded Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Wed, 28 Oct 2020 10:02:51 +0000
Subject: [PATCH 4/4] Apply 1 suggestion(s) to 1 file(s)

---
 src/components/timeline/timeline.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 234ca2d2..e4404daf 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -110,7 +110,6 @@
 
   &.-blocked {
     pointer-events: none;
-    cursor: wait;
   }
 }