任务窗格中的 Office 插件切换 div（加载面板）不起作用

Question

here is another issue I come accross. My AddIn is working fine, I only have three API call's and they all work. However, two of these calls take some time to return the data. To inform the users the process is still running I want to have a loading panel. In my taskspane.html I have a div called:

<div id="loader" class="hideLoader"></div>

The div is styled using CSS. I have added a class to the div which hides de DIV by default. I also have a class (showLoader) that has a style to show the DIV.

.showLoader {
  visibility: visible;
  display: block;
}

.hideLoader {
  visibility: hidden;
  display: none;
}

Now when I execute a function that retrieves the data I have a function that toggles the classes.

function toggleLoader(display: string) {
  if (display == 'show') {
    $("#loader").removeClass("hideLoader");
    $("#loader").addClass("showLoader");
  }
  else {
    $("#loader").addClass("hideLoader");
    $("#loader").removeClass("showLoader");
  }    
}

When I debug the running AddIn, I can see the values for the DIV are set correctly, however, the DIV doesn't show.

One of the two functions that calls the toggelLoader-function:

 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;

    // eslint-disable-next-line no-undef
    fetch(fetchUrl,
        { 
          method: 'POST',      
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          },     
          credentials: 'include',
          body: JSON.stringify(projectObject)                      
        })
        .then(response => response.text())
        .then(data => insertMapImage(data))
        .catch((error) => {
          // eslint-disable-next-line no-undef
          console.error('Error:', error);
          $('#error').text("Error retreiving the map!");
        });
    
        await context.sync();

        toggleLoader('hide');
      });
    }

I don't know what is wrong with the code. There are no javascript exceptions.

The AddIn is coded using TypeScript and generated using Yeoman

UPDATE (after the comment from Rick)

The strange thing is I have got another function inside my taskpane.ts which does a similar thing, by similar I mean manipulate classes of an element (addClass and removeClass). This works fine. When this function is executed from (also) a buttonclick , the class disabled is added and shows the element as disabled .

 export async function clearProjectInformation(){
  return Word.run(async context =>{

    $("#insertMap").addClass("disabled");
    $("#insertTable").addClass("disabled");

    $("#project-nr").val("");
    $("#project-id").text("");
    $("#project-description").val("");
    $("#project-location").text("");
    $("#project-client").val("");
    $("#error").text("");

    await context.sync();
  }).catch(function (error) 
  {
    // eslint-disable-next-line no-undef
    if (error instanceof OfficeExtension.Error) {
      // eslint-disable-next-line no-undef
      console.log('Error code and message: ' + error.toString());
    }
  });
}

Answer 1

I finally found the solution. The behavior of the code was correct. But because of the async nature of the function getMapImage() , the code at the end was executed right after the fetch wat initiated. This happens so fast, that it was impossible to see if switching the loader-layer worked. It did work according to my debugger information, but onscreen nothing seemed to happen.

The solution was to move the toggleLoader("hide") function from the end, to the promise code. My mistake was to not to think of the async way code execution works (I thought of the traditional procedure way code is executed). Pay attention to the extra .then() compared to the original function posted in the question:

 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;

    // eslint-disable-next-line no-undef
    fetch(fetchUrl,
        { 
          method: 'POST',      
          headers: {
            "Content-type": "application/json; charset=UTF-8"
          },     
          credentials: 'include',
          body: JSON.stringify(projectObject)                      
        })
        .then(response => response.text())
        .then(data => insertMapImage(data))
        .then((result) => {
          toggleLoader("hide");
        })
        .catch((error) => {
          // eslint-disable-next-line no-undef
          console.error('Error:', error);
          $('#error').text("Fout bij het ophalen van de kaart!");
          toggleLoader("hide");
        });
    
        await context.sync();   
      });
    }  

This question can be closed!