fix: disable transition when resizing

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 })

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;

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')
+}