解决点击后界面延迟loading的问题

代码

// 保存设计
async function handleSave() {
  saving.value = true

  try {
    if (route.query.type === '1') {
      saveCustomDetail()
    } else {
      // 列表保存
      dragPanel.value.submit((isLoading) => {
        saving.value = isLoading
      })
    }
  } catch (error) {
    console.error('保存出错：', error)
    saving.value = false // 可能需要根据具体情况处理错误状态
  }
}

问题

点击按钮后，更改saving = true后，界面反馈上还需要1s左右才能进入loading状态

原因

保存过程中存在一些耗时的动作，如saveCustomDetail, 因此引入定时器来保证用户点击的时候有足够快的反馈

修改后的代码如下

// 保存
async function handleSave() {
  saving.value = true
  // 详情保存

  // 设置一个短暂的延迟，确保用户能够感知到点击操作
  // await new Promise((resolve) => setTimeout(resolve, 100))
  setTimeout(async () => {
    try {
      if (route.query.type === '1') {
        await saveCustomDetail()
      } else {
      // 列表保存
        dragPanel.value.submit((isLoading) => {
          saving.value = isLoading
        })
      }
    } catch (error) {
      console.error('保存出错：', error)
      saving.value = false // 可能需要根据具体情况处理错误状态
    }
  }, 100)
}