From b9d4bfd07da857d616bd67e9b9588ba270a3b551 Mon Sep 17 00:00:00 2001
From: EnixCoda <enixcoda@gmail.com>
Date: Wed, 8 Apr 2020 22:28:50 +0800
Subject: [PATCH] fix: disable transition when resizing

---
 src/components/Resizable.tsx | 7 +++++++
 src/content.scss             | 7 ++++++-
 src/utils/DOMHelper.ts       | 7 +++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/Resizable.tsx b/src/components/Resizable.tsx
index 99bb480..29a8acc 100644
--- a/src/components/Resizable.tsx
+++ b/src/components/Resizable.tsx
@@ -3,6 +3,7 @@ import { useConfigs } from 'containers/ConfigsContext'
 import * as React from 'react'
 import { useWindowSize } from 'react-use'
 import { cx } from 'utils/cx'
+import { setResizingState } from 'utils/DOMHelper'
 import * as features from 'utils/features'
 
 export type Size = number
@@ -27,6 +28,12 @@ export function Resizable({ baseSize, className, children }: React.PropsWithChil
       setSize(width - MINIMAL_CONTENT_VIEWPORT_WIDTH)
   }, [width, size])
 
+  React.useEffect(() => {
+    setResizingState(true)
+    const timer = setTimeout(() => setResizingState(false), 100)
+    return () => clearTimeout(timer)
+  }, [width, size])
+
   React.useEffect(() => {
     document.documentElement.style.setProperty('--gitako-width', size + 'px')
     configContext.set({ sideBarWidth: size })
diff --git a/src/content.scss b/src/content.scss
index 94aa306..d738f2c 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -126,9 +126,14 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   padding: 4px;
   border: 1px solid transparent;
   will-change: transform;
-  transition: transform $animation-duration ease;
   transform: translate(calc(var(--gitako-width) - 30px));
 
+  transition: transform $animation-duration ease;
+  // disable position transition when resizing sidebar
+  &.resizing {
+    transition: none;
+  }
+
   &.collapsed {
     border-color: $border-gray;
     border-radius: 3px;
diff --git a/src/utils/DOMHelper.ts b/src/utils/DOMHelper.ts
index 5671d80..a6bfdcc 100644
--- a/src/utils/DOMHelper.ts
+++ b/src/utils/DOMHelper.ts
@@ -107,3 +107,10 @@ export function focusSearchInput() {
     }
   })
 }
+
+export function setResizingState(on: boolean) {
+  const target = document.querySelector('.gitako-toggle-show-button-wrapper')
+  if (!target) return
+  if (on) target.classList.add('resizing')
+  else target.classList.remove('resizing')
+}