Office Addin任务窗格(taskpane)加载面板toggle切换不显示问题

问题根因 #

加载面板不显示的核心原因是异步逻辑执行顺序错误：

• 代码中的fetch是原生异步请求方法，默认不会阻塞后续代码执行。你没有对fetch添加await，导致toggleLoader('show')执行后，代码直接向后运行到await context.sync()，随后立刻执行toggleLoader('hide')。整个显示再隐藏的过程耗时极短，浏览器还没完成页面重绘，所以肉眼看不到加载面板的展示，调试时能看到类属性切换是因为断点暂停了代码执行，给了浏览器渲染的时间。
• 你提到的clearProjectInformation函数运行正常，是因为该函数内没有未等待的异步IO操作，所有DOM修改都是同步执行，修改后的样式能正常渲染到页面上。
• 额外说明：修改DOM元素类名属于浏览器前端操作，不需要等待context.sync()执行完成，context.sync()是用来同步Office对象上下文的方法，和DOM渲染无关。

修复方案 #

给fetch调用加上await，同时将加载面板隐藏逻辑放到请求结束后的finally回调中，保证无论请求成功还是失败，最终都会隐藏加载面板。

修改后的getMapImage代码如下：

export async function getMapImage() {
  return Word.run(async context => {
    // 先显示加载面板
    toggleLoader('show');
  
    title = $("#title").val() as string;
    scale = $("#map-scale").val() as number;
    language = $("#language").val() as string;

    $("#error").text("");
    let fetchUrl: string;

    fetchUrl = mapUrl.replace("[title]",title)
    .replace("[scale]",scale.toString())
    .replace("[lng]",language)

    projectObject.Description = $("#project-description").val() as string;
    projectObject.Client.Name = $("#project-client").val() as string;

    try {
      // 给fetch加await，等待请求执行完成
      const response = await fetch(fetchUrl,
      { 
        method: 'POST',      
        headers: {
          "Content-type": "application/json; charset=UTF-8"
        },     
        credentials: 'include',
        body: JSON.stringify(projectObject)                      
      });
      const data = await response.text();
      insertMapImage(data);
    } catch (error) {
      console.error('Error:', error);
      $('#error').text("Error retreiving the map!");
    } finally {
      // 无论请求成功失败，最终隐藏加载面板
      toggleLoader('hide');
    }
    
    await context.sync();
  });
}

内容的提问来源于stack exchange，提问作者Stephan