Add delay_visibility property to ProgressModal to delay its appearance by one second, preventing brief flashes during fast operations like checkpoint restoration

Author: robertpiosik

packages/ui/src/components/editor/panel/modals/ProgressModal/ProgressModal.tsx

@@ -26,6 +26,7 @@ type Props = {
   tokens_per_second?: number
   files?: FileProgress[]
   show_elapsed_time?: boolean
+  delay_visibility?: boolean
 }
 
 const format_tokens_per_second = (tps: number): string => {
@@ -52,14 +53,19 @@ const get_status_text = (status: FileProgressStatus): string => {
 }
 
 export const ProgressModal: React.FC<Props> = (props) => {
-  const [is_visible, set_is_visible] = useState(false)
+  const [is_visible, set_is_visible] = useState(!props.delay_visibility)
   const [elapsed_time, set_elapsed_time] = useState(0)
 
   useEffect(() => {
-    set_is_visible(false)
-    const visibility_timer = setTimeout(() => {
+    let visibility_timer: NodeJS.Timeout | undefined
+    if (props.delay_visibility) {
+      set_is_visible(false)
+      visibility_timer = setTimeout(() => {
+        set_is_visible(true)
+      }, 1000)
+    } else {
       set_is_visible(true)
-    }, 1000)
+    }
 
     let elapsed_time_timer: NodeJS.Timeout | undefined
     if (props.show_elapsed_time !== false) {
@@ -74,7 +80,7 @@ export const ProgressModal: React.FC<Props> = (props) => {
       clearTimeout(visibility_timer)
       clearInterval(elapsed_time_timer)
     }
-  }, [props.title, props.show_elapsed_time])
+  }, [props.show_elapsed_time, props.delay_visibility])
 
   return is_visible ? (
     <Modal

packages/vscode/src/commands/checkpoints-command/actions/restore-checkpoint.ts

@@ -318,7 +318,8 @@ export const restore_checkpoint = async (params: {
         title,
         progress: current_progress,
         cancellable: false,
-        show_elapsed_time: false
+        show_elapsed_time: false,
+        delay_visibility: true
       })
       const progress: vscode.Progress<{
         message?: string
@@ -332,7 +333,8 @@ export const restore_checkpoint = async (params: {
               title,
               progress: Math.min(current_progress, 100),
               cancellable: false,
-              show_elapsed_time: false
+              show_elapsed_time: false,
+              delay_visibility: true
             })
           }
         }

packages/vscode/src/views/panel/backend/panel-provider.ts

@@ -427,7 +427,7 @@ export class PanelProvider implements vscode.WebviewViewProvider {
                 panel_provider: this,
                 websites_provider: this.websites_provider,
                 options: {
-                  show_auto_closing_modal_on_success: true
+                  show_auto_closing_modal_on_success: true,
                 }
               })
             }

packages/vscode/src/views/panel/frontend/Panel.tsx

@@ -448,6 +448,7 @@ export const Panel = () => {
               tokens_per_second={progress_state.tokens_per_second}
               files={progress_state.files}
               show_elapsed_time={progress_state.show_elapsed_time}
+              delay_visibility={progress_state.delay_visibility}
               on_cancel={
                 progress_state.cancellable
                   ? () => {

packages/vscode/src/views/panel/frontend/hooks/use-panel.ts

@@ -27,6 +27,7 @@ export const use_panel = (vscode: any) => {
     files?: FileProgress[]
     cancellable?: boolean
     show_elapsed_time?: boolean
+    delay_visibility?: boolean
   }>()
   const [auto_closing_modal_title, set_auto_closing_modal_title] = useState<
     string | undefined
@@ -197,7 +198,8 @@ export const use_panel = (vscode: any) => {
           tokens_per_second: message.tokens_per_second,
           files: message.files,
           cancellable: message.cancellable ?? true,
-          show_elapsed_time: message.show_elapsed_time
+          show_elapsed_time: message.show_elapsed_time,
+          delay_visibility: message.delay_visibility
         })
       } else if (message.command == 'HIDE_PROGRESS') {
         set_progress_state(undefined)

packages/vscode/src/views/panel/types/messages.ts

@@ -606,6 +606,7 @@ export interface ShowProgressMessage extends BaseMessage {
   files?: FileProgress[]
   cancellable?: boolean
   show_elapsed_time?: boolean
+  delay_visibility?: boolean
 }
 
 export interface HideProgressMessage extends BaseMessage {