delay

TabbyML · Mar 28, 2024 · a276ceb · a276ceb
1 parent 1c967ee
commit a276ceb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget-extension.tsx b/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget-extension.tsx
@@ -18,7 +18,9 @@ function ActionBarWidgetExtension(): Extension {
       if (transaction.selection) {
         if (shouldShowActionBarWidget(transaction)) {
           const tooltip = createActionBarWidget(transaction.state)
-          return tooltip?.pos !== value?.pos ? tooltip : value
+          // avoid flickering
+          // return tooltip?.pos !== value?.pos ? tooltip : value
+          return tooltip
         }
         return null
       }
@@ -28,6 +30,8 @@ function ActionBarWidgetExtension(): Extension {
   })
 }
 
+let delayTimer: number
+
 function createActionBarWidget(state: EditorState): Tooltip {
   const { selection } = state
   const lineFrom = state.doc.lineAt(selection.main.from)
@@ -43,10 +47,15 @@ function createActionBarWidget(state: EditorState): Tooltip {
     create() {
       const dom = document.createElement('div')
       dom.style.background = 'transparent'
-      // dom.style.border = 'none'
+      dom.style.border = 'none'
       const root = ReactDOM.createRoot(dom)
       dom.onclick = e => e.stopImmediatePropagation()
-      root.render(<ActionBarWidget />)
+      // delay popup
+      if (delayTimer) clearTimeout(delayTimer)
+      delayTimer = window.setTimeout(() => {
+        root.render(<ActionBarWidget />)
+      }, 500)
+
       return { dom }
     }
   }

diff --git a/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget.tsx b/ee/tabby-ui/app/files/components/action-bar-widget/action-bar-widget.tsx
@@ -25,7 +25,7 @@ export const ActionBarWidget: React.FC<ActionBarWidgetProps> = ({
   return (
     <div
       className={cn(
-        'flex items-center gap-2 rounded-md border bg-background px-2 py-1',
+        'flex items-center gap-2 rounded-md border bg-background px-2 py-1 mt-2',
         className
       )}
       {...props}