[lint] Enforce @typescript-eslint/no-floating-promises (#3402)

2026-02-06 08:00:05 +00:00 · 2025-04-11 12:19:22 -04:00
parent 59e20964a0
commit dc5d7ea1be
60 changed files with 305 additions and 279 deletions
--- a/src/components/actionbar/ComfyActionbar.vue
+++ b/src/components/actionbar/ComfyActionbar.vue
@@ -89,9 +89,9 @@ const setInitialPosition = () => {
  }
 }
 onMounted(setInitialPosition)
-watch(visible, (newVisible) => {
+watch(visible, async (newVisible) => {
  if (newVisible) {
-    nextTick(setInitialPosition)
+    await nextTick(setInitialPosition)
  }
 })

--- a/src/components/actionbar/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyQueueButton.vue
@@ -135,12 +135,12 @@ const hasPendingTasks = computed(
 )

 const commandStore = useCommandStore()
-const queuePrompt = (e: Event) => {
+const queuePrompt = async (e: Event) => {
  const commandId =
    'shiftKey' in e && e.shiftKey
      ? 'Comfy.QueuePromptFront'
      : 'Comfy.QueuePrompt'
-  commandStore.execute(commandId)
+  await commandStore.execute(commandId)
 }
 </script>

--- a/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/CommandTerminal.vue
@@ -24,17 +24,17 @@ const terminalCreated = (
    root,
    autoRows: true,
    autoCols: true,
-    onResize: () => {
+    onResize: async () => {
      // If we aren't visible, don't resize
      if (!terminal.element?.offsetParent) return

-      terminalApi.resize(terminal.cols, terminal.rows)
+      await terminalApi.resize(terminal.cols, terminal.rows)
    }
  })

  onMounted(async () => {
    offData = terminal.onData(async (message: string) => {
-      terminalApi.write(message)
+      await terminalApi.write(message)
    })

    offOutput = terminalApi.onOutput((message) => {
--- a/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
+++ b/src/components/bottomPanel/tabs/terminal/LogsTerminal.vue
@@ -57,7 +57,7 @@ const terminalCreated = (
    if (!clientId.value) {
      await until(clientId).not.toBeNull()
    }
-    api.subscribeLogs(true)
+    await api.subscribeLogs(true)
    api.addEventListener('logs', logReceived)
  }

@@ -76,9 +76,9 @@ const terminalCreated = (
    loading.value = false
  })

-  onUnmounted(() => {
+  onUnmounted(async () => {
    if (api.clientId) {
-      api.subscribeLogs(false)
+      await api.subscribeLogs(false)
    }
    api.removeEventListener('logs', logReceived)
  })
--- a/src/components/common/EditableText.vue
+++ b/src/components/common/EditableText.vue
@@ -45,10 +45,10 @@ const finishEditing = () => {
 }
 watch(
  () => isEditing,
-  (newVal) => {
+  async (newVal) => {
    if (newVal) {
      inputValue.value = modelValue
-      nextTick(() => {
+      await nextTick(() => {
        if (!inputRef.value) return
        const fileName = inputValue.value.includes('.')
          ? inputValue.value.split('.').slice(0, -1).join('.')
--- a/src/components/common/TreeExplorer.vue
+++ b/src/components/common/TreeExplorer.vue
@@ -186,9 +186,9 @@ const menuItems = computed<MenuItem[]>(() =>
    {
      label: t('g.delete'),
      icon: 'pi pi-trash',
-      command: () => {
+      command: async () => {
        if (menuTargetNode.value) {
-          deleteCommand(menuTargetNode.value)
+          await deleteCommand(menuTargetNode.value)
        }
      },
      visible: menuTargetNode.value?.handleDelete !== undefined,
--- a/src/components/common/tests/UrlInput.test.ts
+++ b/src/components/common/tests/UrlInput.test.ts
@@ -60,7 +60,7 @@ describe('UrlInput', () => {
        })
    })

-    wrapper.setProps({ modelValue: 'https://test.com' })
+    await wrapper.setProps({ modelValue: 'https://test.com' })
    await nextTick()
    await nextTick()

@@ -74,7 +74,7 @@ describe('UrlInput', () => {
      validateUrlFn: () => Promise.resolve(true)
    })

-    wrapper.setProps({ modelValue: 'https://test.com' })
+    await wrapper.setProps({ modelValue: 'https://test.com' })
    await nextTick()
    await nextTick()

@@ -88,7 +88,7 @@ describe('UrlInput', () => {
      validateUrlFn: () => Promise.resolve(false)
    })

-    wrapper.setProps({ modelValue: 'https://test.com' })
+    await wrapper.setProps({ modelValue: 'https://test.com' })
    await nextTick()
    await nextTick()

@@ -141,14 +141,14 @@ describe('UrlInput', () => {
      }
    })

-    wrapper.setProps({ modelValue: 'https://test.com' })
+    await wrapper.setProps({ modelValue: 'https://test.com' })
    await nextTick()
    await nextTick()

    // Trigger multiple validations in quick succession
-    wrapper.find('.pi-spinner').trigger('click')
-    wrapper.find('.pi-spinner').trigger('click')
-    wrapper.find('.pi-spinner').trigger('click')
+    await wrapper.find('.pi-spinner').trigger('click')
+    await wrapper.find('.pi-spinner').trigger('click')
+    await wrapper.find('.pi-spinner').trigger('click')

    await nextTick()
    await nextTick()
--- a/src/components/dialog/content/MissingModelsWarning.vue
+++ b/src/components/dialog/content/MissingModelsWarning.vue
@@ -129,9 +129,12 @@ const missingModels = computed(() => {
  })
 })

-onBeforeUnmount(() => {
+onBeforeUnmount(async () => {
  if (doNotAskAgain.value) {
-    useSettingStore().set('Comfy.Workflow.ShowMissingModelsWarning', false)
+    await useSettingStore().set(
+      'Comfy.Workflow.ShowMissingModelsWarning',
+      false
+    )
  }
 })
 </script>
--- a/src/components/dialog/content/manager/ManagerDialogContent.vue
+++ b/src/components/dialog/content/manager/ManagerDialogContent.vue
@@ -222,13 +222,13 @@ const filterOutdatedPacks = (packs: components['schemas']['Node'][]) =>

 watch(
  [isUpdateAvailableTab, installedPacks],
-  () => {
+  async () => {
    if (!isUpdateAvailableTab.value) return

    if (!isEmptySearch.value) {
      displayPacks.value = filterOutdatedPacks(installedPacks.value)
    } else if (!installedPacks.value.length) {
-      startFetchInstalled()
+      await startFetchInstalled()
    } else {
      displayPacks.value = filterOutdatedPacks(installedPacks.value)
    }
@@ -238,7 +238,7 @@ watch(

 watch(
  [isInstalledTab, installedPacks],
-  () => {
+  async () => {
    if (!isInstalledTab.value) return

    if (!isEmptySearch.value) {
@@ -248,7 +248,7 @@ watch(
      !installedPacksReady.value &&
      !isLoadingInstalled.value
    ) {
-      startFetchInstalled()
+      await startFetchInstalled()
    } else {
      displayPacks.value = installedPacks.value
    }
@@ -258,7 +258,7 @@ watch(

 watch(
  [isMissingTab, isWorkflowTab, workflowPacks, installedPacks],
-  () => {
+  async () => {
    if (!isWorkflowTab.value && !isMissingTab.value) return

    if (!isEmptySearch.value) {
@@ -270,9 +270,9 @@ watch(
      !isLoadingWorkflow.value &&
      !workflowPacksReady.value
    ) {
-      startFetchWorkflowPacks()
+      await startFetchWorkflowPacks()
      if (isMissingTab.value) {
-        startFetchInstalled()
+        await startFetchInstalled()
      }
    } else {
      displayPacks.value = isMissingTab.value
--- a/src/components/dialog/content/setting/ColorPaletteMessage.vue
+++ b/src/components/dialog/content/setting/ColorPaletteMessage.vue
@@ -55,7 +55,7 @@ const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)
 const importCustomPalette = async () => {
  const palette = await colorPaletteService.importColorPalette()
  if (palette) {
-    settingStore.set('Comfy.ColorPalette', palette.id)
+    await settingStore.set('Comfy.ColorPalette', palette.id)
  }
 }
 </script>
--- a/src/components/dialog/content/setting/CurrentUserMessage.vue
+++ b/src/components/dialog/content/setting/CurrentUserMessage.vue
@@ -22,8 +22,8 @@ import Message from 'primevue/message'
 import { useUserStore } from '@/stores/userStore'

 const userStore = useUserStore()
-const logout = () => {
-  userStore.logout()
+const logout = async () => {
+  await userStore.logout()
  window.location.reload()
 }
 </script>
--- a/src/components/dialog/content/setting/ExtensionPanel.vue
+++ b/src/components/dialog/content/setting/ExtensionPanel.vue
@@ -116,44 +116,44 @@ const hasChanges = computed(() => {
  return changedExtensions.value.length > 0
 })

-const updateExtensionStatus = () => {
+const updateExtensionStatus = async () => {
  const editingDisabledExtensionNames = Object.entries(
    editingEnabledExtensions.value
  )
    .filter(([_, enabled]) => !enabled)
    .map(([name]) => name)

-  settingStore.set('Comfy.Extension.Disabled', [
+  await settingStore.set('Comfy.Extension.Disabled', [
    ...extensionStore.inactiveDisabledExtensionNames,
    ...editingDisabledExtensionNames
  ])
 }

-const enableAllExtensions = () => {
+const enableAllExtensions = async () => {
  extensionStore.extensions.forEach((ext) => {
    if (extensionStore.isExtensionReadOnly(ext.name)) return

    editingEnabledExtensions.value[ext.name] = true
  })
-  updateExtensionStatus()
+  await updateExtensionStatus()
 }

-const disableAllExtensions = () => {
+const disableAllExtensions = async () => {
  extensionStore.extensions.forEach((ext) => {
    if (extensionStore.isExtensionReadOnly(ext.name)) return

    editingEnabledExtensions.value[ext.name] = false
  })
-  updateExtensionStatus()
+  await updateExtensionStatus()
 }

-const disableThirdPartyExtensions = () => {
+const disableThirdPartyExtensions = async () => {
  extensionStore.extensions.forEach((ext) => {
    if (extensionStore.isCoreExtension(ext.name)) return

    editingEnabledExtensions.value[ext.name] = false
  })
-  updateExtensionStatus()
+  await updateExtensionStatus()
 }

 const applyChanges = () => {
--- a/src/components/dialog/content/setting/FirstTimeUIMessage.vue
+++ b/src/components/dialog/content/setting/FirstTimeUIMessage.vue
@@ -18,9 +18,9 @@ import { useSettingStore } from '@/stores/settingStore'

 const settingStore = useSettingStore()
 const show = computed(() => !settingStore.exists('Comfy.UseNewMenu'))
-const handleClose = () => {
+const handleClose = async () => {
  // Explicitly write the current value to the store.
  const currentValue = settingStore.get('Comfy.UseNewMenu')
-  settingStore.set('Comfy.UseNewMenu', currentValue)
+  await settingStore.set('Comfy.UseNewMenu', currentValue)
 }
 </script>
--- a/src/components/dialog/content/setting/KeybindingPanel.vue
+++ b/src/components/dialog/content/setting/KeybindingPanel.vue
@@ -211,14 +211,14 @@ watchEffect(() => {
  }
 })

-function removeKeybinding(commandData: ICommandData) {
+async function removeKeybinding(commandData: ICommandData) {
  if (commandData.keybinding) {
    keybindingStore.unsetKeybinding(commandData.keybinding)
-    keybindingService.persistUserKeybindings()
+    await keybindingService.persistUserKeybindings()
  }
 }

-function captureKeybinding(event: KeyboardEvent) {
+async function captureKeybinding(event: KeyboardEvent) {
  // Allow the use of keyboard shortcuts when adding keyboard shortcuts
  if (!event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
    switch (event.key) {
@@ -226,7 +226,7 @@ function captureKeybinding(event: KeyboardEvent) {
        cancelEdit()
        return
      case 'Enter':
-        saveKeybinding()
+        await saveKeybinding()
        return
    }
  }
@@ -240,7 +240,7 @@ function cancelEdit() {
  newBindingKeyCombo.value = null
 }

-function saveKeybinding() {
+async function saveKeybinding() {
  if (currentEditingCommand.value && newBindingKeyCombo.value) {
    const updated = keybindingStore.updateKeybindingOnCommand(
      new KeybindingImpl({
@@ -249,7 +249,7 @@ function saveKeybinding() {
      })
    )
    if (updated) {
-      keybindingService.persistUserKeybindings()
+      await keybindingService.persistUserKeybindings()
    }
  }
  cancelEdit()
--- a/src/components/dialog/content/setting/ServerConfigPanel.vue
+++ b/src/components/dialog/content/setting/ServerConfigPanel.vue
@@ -97,16 +97,16 @@ const revertChanges = () => {
  serverConfigStore.revertChanges()
 }

-const restartApp = () => {
-  electronAPI().restartApp()
+const restartApp = async () => {
+  await electronAPI().restartApp()
 }

-watch(launchArgs, (newVal) => {
-  settingStore.set('Comfy.Server.LaunchArgs', newVal)
+watch(launchArgs, async (newVal) => {
+  await settingStore.set('Comfy.Server.LaunchArgs', newVal)
 })

-watch(serverConfigValues, (newVal) => {
-  settingStore.set('Comfy.Server.ServerConfigValues', newVal)
+watch(serverConfigValues, async (newVal) => {
+  await settingStore.set('Comfy.Server.ServerConfigValues', newVal)
 })

 const { copyToClipboard } = useCopyToClipboard()
--- a/src/components/dialog/content/setting/SettingItem.vue
+++ b/src/components/dialog/content/setting/SettingItem.vue
@@ -69,7 +69,7 @@ const formItem = computed(() => {

 const settingStore = useSettingStore()
 const settingValue = computed(() => settingStore.get(props.setting.id))
-const updateSettingValue = (value: any) => {
-  settingStore.set(props.setting.id, value)
+const updateSettingValue = async (value: any) => {
+  await settingStore.set(props.setting.id, value)
 }
 </script>
--- a/src/components/dialog/footer/ManagerProgressFooter.vue
+++ b/src/components/dialog/footer/ManagerProgressFooter.vue
@@ -99,8 +99,8 @@ const handleRestart = async () => {
  await useComfyManagerService().rebootComfyUI()
  closeDialog()

-  const onReconnect = () => {
-    useCommandStore().execute('Comfy.RefreshNodeDefinitions')
+  const onReconnect = async () => {
+    await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
    comfyManagerStore.clearLogs()
    comfyManagerStore.setStale()
  }
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -150,16 +150,16 @@ const colorPaletteService = useColorPaletteService()
 const colorPaletteStore = useColorPaletteStore()
 watch(
  [() => canvasStore.canvas, () => settingStore.get('Comfy.ColorPalette')],
-  ([canvas, currentPaletteId]) => {
+  async ([canvas, currentPaletteId]) => {
    if (!canvas) return

-    colorPaletteService.loadColorPalette(currentPaletteId)
+    await colorPaletteService.loadColorPalette(currentPaletteId)
  }
 )
 watch(
  () => colorPaletteStore.activePaletteId,
-  (newValue) => {
-    settingStore.set('Comfy.ColorPalette', newValue)
+  async (newValue) => {
+    await settingStore.set('Comfy.ColorPalette', newValue)
  }
 )

@@ -292,7 +292,7 @@ onMounted(async () => {
    () => settingStore.get('Comfy.Locale'),
    async () => {
      await useCommandStore().execute('Comfy.RefreshNodeDefinitions')
-      useWorkflowService().reloadCurrentWorkflow()
+      await useWorkflowService().reloadCurrentWorkflow()
    }
  )

--- a/src/components/graph/GraphCanvasMenu.vue
+++ b/src/components/graph/GraphCanvasMenu.vue
@@ -80,10 +80,10 @@ const linkHidden = computed(
 )

 let interval: number | null = null
-const repeat = (command: string) => {
+const repeat = async (command: string) => {
  if (interval) return
  const cmd = () => commandStore.execute(command)
-  cmd()
+  await cmd()
  interval = window.setInterval(cmd, 100)
 }
 const stopRepeat = () => {
--- a/src/components/install/InstallLocationPicker.vue
+++ b/src/components/install/InstallLocationPicker.vue
@@ -142,12 +142,12 @@ const browsePath = async () => {
  }
 }

-const onFocus = () => {
+const onFocus = async () => {
  if (!inputTouched.value) {
    inputTouched.value = true
    return
  }
  // Refresh validation on re-focus
-  validatePath(installPath.value)
+  await validatePath(installPath.value)
 }
 </script>
--- a/src/components/load3d/Load3DScene.vue
+++ b/src/components/load3d/Load3DScene.vue
@@ -71,7 +71,7 @@ const eventConfig = {
  textureLoadingEnd: () => loadingOverlayRef.value?.endLoading()
 } as const

-watchEffect(() => {
+watchEffect(async () => {
  if (load3d.value) {
    const rawLoad3d = toRaw(load3d.value)

@@ -81,7 +81,7 @@ watchEffect(() => {
    rawLoad3d.setFOV(props.fov)
    rawLoad3d.toggleCamera(props.cameraType)
    rawLoad3d.togglePreview(props.showPreview)
-    rawLoad3d.setBackgroundImage(props.backgroundImage)
+    await rawLoad3d.setBackgroundImage(props.backgroundImage)
    rawLoad3d.setUpDirection(props.upDirection)
  }
 })
--- a/src/components/searchbox/NodeSearchBox.vue
+++ b/src/components/searchbox/NodeSearchBox.vue
@@ -135,11 +135,11 @@ const search = (query: string) => {
 const emit = defineEmits(['addFilter', 'removeFilter', 'addNode'])

 let inputElement: HTMLInputElement | null = null
-const reFocusInput = () => {
+const reFocusInput = async () => {
  inputElement ??= document.getElementById(inputId) as HTMLInputElement
  if (inputElement) {
    inputElement.blur()
-    nextTick(() => inputElement?.focus())
+    await nextTick(() => inputElement?.focus())
  }
 }

@@ -150,14 +150,14 @@ const onAddFilter = (
  nodeSearchFilterVisible.value = false
  emit('addFilter', filterAndValue)
 }
-const onRemoveFilter = (
+const onRemoveFilter = async (
  event: Event,
  filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
 ) => {
  event.stopPropagation()
  event.preventDefault()
  emit('removeFilter', filterAndValue)
-  reFocusInput()
+  await reFocusInput()
 }
 const setHoverSuggestion = (index: number) => {
  if (index === -1) {
--- a/src/components/sidebar/SidebarLogoutIcon.vue
+++ b/src/components/sidebar/SidebarLogoutIcon.vue
@@ -16,8 +16,8 @@ const userStore = useUserStore()
 const tooltip = computed(
  () => `${t('sideToolbar.logout')} (${userStore.currentUser?.username})`
 )
-const logout = () => {
-  userStore.logout()
+const logout = async () => {
+  await userStore.logout()
  window.location.reload()
 }
 </script>
--- a/src/components/sidebar/SidebarThemeToggleIcon.vue
+++ b/src/components/sidebar/SidebarThemeToggleIcon.vue
@@ -23,7 +23,7 @@ const icon = computed(() =>
 )

 const commandStore = useCommandStore()
-const toggleTheme = () => {
-  commandStore.execute('Comfy.ToggleTheme')
+const toggleTheme = async () => {
+  await commandStore.execute('Comfy.ToggleTheme')
 }
 </script>
--- a/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/ModelLibrarySidebarTab.vue
@@ -89,9 +89,8 @@ const handleSearch = async (query: string) => {
    return model.searchable.includes(search)
  })

-  nextTick(() => {
-    expandNode(root.value)
-  })
+  await nextTick()
+  expandNode(root.value)
 }

 type ModelOrFolder = ComfyModelDef | ModelFolder
@@ -177,7 +176,7 @@ watch(
        const folderPath = key.split('/').slice(1).join('/')
        if (folderPath && !folderPath.includes('/')) {
          // Trigger (async) load of model data for this folder
-          modelStore.getLoadedModelFolder(folderPath)
+          void modelStore.getLoadedModelFolder(folderPath)
        }
      }
    })
--- a/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
+++ b/src/components/sidebar/tabs/NodeLibrarySidebarTab.vue
@@ -153,7 +153,7 @@ const filteredRoot = computed<TreeNode | null>(() => {
 const filters: Ref<
  (SearchFilter & { filter: FuseFilterWithValue<ComfyNodeDefImpl, string> })[]
 > = ref([])
-const handleSearch = (query: string) => {
+const handleSearch = async (query: string) => {
  // Don't apply a min length filter because it does not make sense in
  // multi-byte languages like Chinese, Japanese, Korean, etc.
  if (query.length === 0 && !filters.value.length) {
@@ -174,13 +174,12 @@ const handleSearch = (query: string) => {
    }
  )

-  nextTick(() => {
-    // @ts-expect-error fixme ts strict error
-    expandNode(filteredRoot.value)
-  })
+  await nextTick()
+  // @ts-expect-error fixme ts strict error
+  expandNode(filteredRoot.value)
 }

-const onAddFilter = (
+const onAddFilter = async (
  filterAndValue: FuseFilterWithValue<ComfyNodeDefImpl, string>
 ) => {
  filters.value.push({
@@ -191,15 +190,15 @@ const onAddFilter = (
    id: +new Date()
  })

-  handleSearch(searchQuery.value)
+  await handleSearch(searchQuery.value)
 }

 // @ts-expect-error fixme ts strict error
-const onRemoveFilter = (filterAndValue) => {
+const onRemoveFilter = async (filterAndValue) => {
  const index = filters.value.findIndex((f) => f === filterAndValue)
  if (index !== -1) {
    filters.value.splice(index, 1)
  }
-  handleSearch(searchQuery.value)
+  await handleSearch(searchQuery.value)
 }
 </script>
--- a/src/components/sidebar/tabs/QueueSidebarTab.vue
+++ b/src/components/sidebar/tabs/QueueSidebarTab.vue
@@ -157,11 +157,11 @@ const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value
 }

-const removeTask = (task: TaskItemImpl) => {
+const removeTask = async (task: TaskItemImpl) => {
  if (task.isRunning) {
-    api.interrupt()
+    await api.interrupt()
  }
-  queueStore.delete(task)
+  await queueStore.delete(task)
 }

 const removeAllTasks = async () => {
@@ -251,8 +251,11 @@ const exitFolderView = () => {
  folderTask.value = null
 }

-const toggleImageFit = () => {
-  settingStore.set(IMAGE_FIT, imageFit.value === 'cover' ? 'contain' : 'cover')
+const toggleImageFit = async () => {
+  await settingStore.set(
+    IMAGE_FIT,
+    imageFit.value === 'cover' ? 'contain' : 'cover'
+  )
 }

 watch(allTasks, () => {
--- a/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
+++ b/src/components/sidebar/tabs/WorkflowsSidebarTab.vue
@@ -160,7 +160,7 @@ const filteredWorkflows = ref<ComfyWorkflow[]>([])
 const filteredRoot = computed<TreeNode>(() => {
  return buildWorkflowTree(filteredWorkflows.value as ComfyWorkflow[])
 })
-const handleSearch = (query: string) => {
+const handleSearch = async (query: string) => {
  if (query.length === 0) {
    filteredWorkflows.value = []
    expandedKeys.value = {}
@@ -170,9 +170,8 @@ const handleSearch = (query: string) => {
  filteredWorkflows.value = workflowStore.workflows.filter((workflow) => {
    return workflow.path.toLocaleLowerCase().includes(lowerQuery)
  })
-  nextTick(() => {
-    expandNode(filteredRoot.value)
-  })
+  await nextTick()
+  expandNode(filteredRoot.value)
 }

 const workflowStore = useWorkflowStore()
@@ -183,9 +182,9 @@ const expandedKeys = ref<Record<string, boolean>>({})
 const { expandNode, toggleNodeOnEvent } = useTreeExpansion(expandedKeys)
 const dummyExpandedKeys = ref<Record<string, boolean>>({})

-const handleCloseWorkflow = (workflow?: ComfyWorkflow) => {
+const handleCloseWorkflow = async (workflow?: ComfyWorkflow) => {
  if (workflow) {
-    workflowService.closeWorkflow(workflow, {
+    await workflowService.closeWorkflow(workflow, {
      warnIfUnsaved: !workspaceStore.shiftDown
    })
  }
@@ -225,9 +224,12 @@ const renderTreeNode = (

  const workflow: ComfyWorkflow = node.data

-  function handleClick(this: TreeExplorerNode<ComfyWorkflow>, e: MouseEvent) {
+  async function handleClick(
+    this: TreeExplorerNode<ComfyWorkflow>,
+    e: MouseEvent
+  ) {
    if (this.leaf) {
-      workflowService.openWorkflow(workflow)
+      await workflowService.openWorkflow(workflow)
    } else {
      toggleNodeOnEvent(e, this)
    }
@@ -254,9 +256,9 @@ const renderTreeNode = (
            {
              label: t('g.insert'),
              icon: 'pi pi-file-export',
-              command: () => {
+              command: async () => {
                const workflow = node.data
-                workflowService.insertWorkflow(workflow)
+                await workflowService.insertWorkflow(workflow)
              }
            }
          ]
--- a/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
+++ b/src/components/sidebar/tabs/modelLibrary/ModelTreeLeaf.vue
@@ -87,7 +87,7 @@ const handleModelHover = async () => {
    modelPreviewStyle.value.left = `${targetRect.left - 400}px`
  }

-  modelDef.value.load()
+  await modelDef.value.load()
 }

 const container = ref<HTMLElement | undefined>()
@@ -111,17 +111,17 @@ const showPreview = computed(() => {
 const handleMouseEnter = async () => {
  isHovered.value = true
  await nextTick()
-  handleModelHover()
+  await handleModelHover()
 }
 const handleMouseLeave = () => {
  isHovered.value = false
 }
-onMounted(() => {
+onMounted(async () => {
  modelContentElement.value =
    container.value?.closest('.p-tree-node-content') ?? undefined
  modelContentElement.value?.addEventListener('mouseenter', handleMouseEnter)
  modelContentElement.value?.addEventListener('mouseleave', handleMouseLeave)
-  modelDef.value.load()
+  await modelDef.value.load()
 })

 onUnmounted(() => {
--- a/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeBookmarkTreeExplorer.vue
@@ -82,9 +82,10 @@ const bookmarkedRoot = computed<TreeNode>(() => {
 })
 watch(
  () => props.filteredNodeDefs,
-  (newValue) => {
+  async (newValue) => {
    if (newValue.length) {
-      nextTick(() => expandNode(bookmarkedRoot.value))
+      await nextTick()
+      expandNode(bookmarkedRoot.value)
    }
  }
 )
@@ -145,9 +146,9 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
        },
        children: sortedChildren,
        draggable: node.leaf,
-        handleAddFolder(newName: string) {
+        async handleAddFolder(newName: string) {
          if (newName !== '') {
-            nodeBookmarkStore.addNewBookmarkFolder(this.data, newName)
+            await nodeBookmarkStore.addNewBookmarkFolder(this.data, newName)
          }
        },
        renderDragPreview(container) {
@@ -158,18 +159,18 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
          }
        },
        droppable: !node.leaf,
-        handleDrop(data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>) {
+        async handleDrop(data: TreeExplorerDragAndDropData<ComfyNodeDefImpl>) {
          const nodeDefToAdd = data.data.data
          // Remove bookmark if the source is the top level bookmarked node.
          // @ts-expect-error fixme ts strict error
          if (nodeBookmarkStore.isBookmarked(nodeDefToAdd)) {
            // @ts-expect-error fixme ts strict error
-            nodeBookmarkStore.toggleBookmark(nodeDefToAdd)
+            await nodeBookmarkStore.toggleBookmark(nodeDefToAdd)
          }
          const folderNodeDef = node.data as ComfyNodeDefImpl
          // @ts-expect-error fixme ts strict error
          const nodePath = folderNodeDef.category + '/' + nodeDefToAdd.name
-          nodeBookmarkStore.addBookmark(nodePath)
+          await nodeBookmarkStore.addBookmark(nodePath)
        },
        handleClick(e: MouseEvent) {
          if (this.leaf) {
@@ -183,14 +184,17 @@ const renderedBookmarkedRoot = computed<TreeExplorerNode<ComfyNodeDefImpl>>(
        ...(node.leaf
          ? {}
          : {
-              handleRename(newName: string) {
+              async handleRename(newName: string) {
                if (this.data && this.data.isDummyFolder) {
-                  nodeBookmarkStore.renameBookmarkFolder(this.data, newName)
+                  await nodeBookmarkStore.renameBookmarkFolder(
+                    this.data,
+                    newName
+                  )
                }
              },
-              handleDelete() {
+              async handleDelete() {
                // @ts-expect-error fixme ts strict error
-                nodeBookmarkStore.deleteBookmarkFolder(this.data)
+                await nodeBookmarkStore.deleteBookmarkFolder(this.data)
              }
            })
      }
@@ -208,9 +212,9 @@ const showCustomizationDialog = ref(false)
 const initialIcon = ref(nodeBookmarkStore.defaultBookmarkIcon)
 const initialColor = ref(nodeBookmarkStore.defaultBookmarkColor)
 const customizationTargetNodePath = ref('')
-const updateCustomization = (icon: string, color: string) => {
+const updateCustomization = async (icon: string, color: string) => {
  if (customizationTargetNodePath.value) {
-    nodeBookmarkStore.updateBookmarkCustomization(
+    await nodeBookmarkStore.updateBookmarkCustomization(
      customizationTargetNodePath.value,
      { icon, color }
    )
--- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue
@@ -67,8 +67,8 @@ const sidebarLocation = computed<'left' | 'right'>(() =>
  settingStore.get('Comfy.Sidebar.Location')
 )

-const toggleBookmark = () => {
-  nodeBookmarkStore.toggleBookmark(nodeDef.value)
+const toggleBookmark = async () => {
+  await nodeBookmarkStore.toggleBookmark(nodeDef.value)
 }

 const previewRef = ref<InstanceType<typeof NodePreview> | null>(null)
@@ -104,7 +104,7 @@ const isHovered = ref(false)
 const handleMouseEnter = async () => {
  isHovered.value = true
  await nextTick()
-  handleNodeHover()
+  await handleNodeHover()
 }
 const handleMouseLeave = () => {
  isHovered.value = false
--- a/src/components/toast/RerouteMigrationToast.vue
+++ b/src/components/toast/RerouteMigrationToast.vue
@@ -32,10 +32,10 @@ const { t } = useI18n()
 const toast = useToast()

 const workflowStore = useWorkflowStore()
-const migrateToLitegraphReroute = () => {
+const migrateToLitegraphReroute = async () => {
  const workflowJSON = app.graph.serialize() as unknown as WorkflowJSON04
  const migratedWorkflowJSON = migrateLegacyRerouteNodes(workflowJSON)
-  app.loadGraphData(
+  await app.loadGraphData(
    migratedWorkflowJSON,
    false,
    false,
--- a/src/components/topbar/WorkflowTab.vue
+++ b/src/components/topbar/WorkflowTab.vue
@@ -89,8 +89,8 @@ const closeWorkflows = async (options: WorkflowOption[]) => {
  }
 }

-const onCloseWorkflow = (option: WorkflowOption) => {
-  closeWorkflows([option])
+const onCloseWorkflow = async (option: WorkflowOption) => {
+  await closeWorkflows([option])
 }
 const tabGetter = () => workflowTabRef.value as HTMLElement

--- a/src/components/topbar/WorkflowTabs.vue
+++ b/src/components/topbar/WorkflowTabs.vue
@@ -86,7 +86,7 @@ const selectedWorkflow = computed<WorkflowOption | null>(() =>
    ? workflowToOption(workflowStore.activeWorkflow as ComfyWorkflow)
    : null
 )
-const onWorkflowChange = (option: WorkflowOption) => {
+const onWorkflowChange = async (option: WorkflowOption) => {
  // Prevent unselecting the current workflow
  if (!option) {
    return
@@ -96,7 +96,7 @@ const onWorkflowChange = (option: WorkflowOption) => {
    return
  }

-  workflowService.openWorkflow(option.workflow)
+  await workflowService.openWorkflow(option.workflow)
 }

 const closeWorkflows = async (options: WorkflowOption[]) => {
@@ -112,8 +112,8 @@ const closeWorkflows = async (options: WorkflowOption[]) => {
  }
 }

-const onCloseWorkflow = (option: WorkflowOption) => {
-  closeWorkflows([option])
+const onCloseWorkflow = async (option: WorkflowOption) => {
+  await closeWorkflows([option])
 }

 const showContextMenu = (event: MouseEvent, option: WorkflowOption) => {
@@ -128,8 +128,8 @@ const contextMenuItems = computed(() => {
  return [
    {
      label: t('tabMenu.duplicateTab'),
-      command: () => {
-        workflowService.duplicateWorkflow(tab.workflow)
+      command: async () => {
+        await workflowService.duplicateWorkflow(tab.workflow)
      }
    },
    {
@@ -181,30 +181,30 @@ const handleWheel = (event: WheelEvent) => {
 // Scroll to active offscreen tab when opened
 watch(
  () => workflowStore.activeWorkflow,
-  () => {
+  async () => {
    if (!selectedWorkflow.value) return

-    nextTick(() => {
-      const activeTabElement = document.querySelector('.p-togglebutton-checked')
-      if (!activeTabElement || !scrollPanelRef.value) return
+    await nextTick()

-      const container = scrollPanelRef.value.$el.querySelector(
-        '.p-scrollpanel-content'
-      )
-      if (!container) return
+    const activeTabElement = document.querySelector('.p-togglebutton-checked')
+    if (!activeTabElement || !scrollPanelRef.value) return

-      const tabRect = activeTabElement.getBoundingClientRect()
-      const containerRect = container.getBoundingClientRect()
+    const container = scrollPanelRef.value.$el.querySelector(
+      '.p-scrollpanel-content'
+    )
+    if (!container) return

-      const offsetLeft = tabRect.left - containerRect.left
-      const offsetRight = tabRect.right - containerRect.right
+    const tabRect = activeTabElement.getBoundingClientRect()
+    const containerRect = container.getBoundingClientRect()

-      if (offsetRight > 0) {
-        container.scrollBy({ left: offsetRight })
-      } else if (offsetLeft < 0) {
-        container.scrollBy({ left: offsetLeft })
-      }
-    })
+    const offsetLeft = tabRect.left - containerRect.left
+    const offsetRight = tabRect.right - containerRect.right
+
+    if (offsetRight > 0) {
+      container.scrollBy({ left: offsetRight })
+    } else if (offsetLeft < 0) {
+      container.scrollBy({ left: offsetLeft })
+    }
  },
  { immediate: true }
 )