Toggle Div del Addin de Office (panel de carga) en la taskpane no funciona.

Aquí hay otro problema que encuentro. Mi complemento funciona bien, solo tengo tres llamadas API y todas funcionan. Sin embargo, dos de estas llamadas tardan un poco en devolver los datos. Para informar a los usuarios que el proceso aún se está ejecutando, quiero tener un panel de carga. En mi taskspane.html tengo un div llamado:

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

El div está estilizado con CSS. He agregado una clase al div que oculta el DIV de forma predeterminada. También tengo una clase (showLoader) que tiene un estilo para mostrar el DIV.

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

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

Ahora, cuando ejecuto una función que recupera los datos, tengo una función que alterna las clases.

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

Cuando depuro el complemento en ejecución, puedo ver que los valores para el DIV se establecen correctamente, sin embargo, el DIV no se muestra.

Una de las dos funciones que llama a la función toggleLoader:

 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&##39;);
      });
    }

No sé qué está mal en el código. No hay excepciones de JavaScript.

El complemento está codificado usando TypeScript y generado usando Yeoman

ACTUALIZACIÓN (después del comentario de Rick)

Lo extraño es que tengo otra función dentro de mi taskpane.ts que hace algo similar, similar en el sentido de manipular clases de un elemento (addClass y removeClass). Esto funciona bien. Cuando se ejecuta esta función desde (también) un buttonclick, la clase disabled se agrega y muestra el elemento como disabled.