Microsoft teams app spinner has incorrect positioning in task modules - stuck to the buttom

Viewed 36

Everything is happening in web version of Microsoft teams

EDIT 1: the content of what I'm trying to render in the task module is structured according to the docs. Manifest property showLoadingIndicator is set to true. The app calls app.initialize() and then, depending on situation, app.notifySuccess() or app.notifyFailure(...)

EDIT 2: This problem started 2 or 3 weeks ago. Before it was working fine.

I create a task module by sending a TaskInfo object on task/fetch request

 task: {
   type,
   value: {
    title,
    height, // default 'medium'
    width, // default 'medium'
    url
   },
 },

I configured my microsoft teams app to use a native spinner untill my code calls notifySuccess function

Before the iframe is loaded I expect the spinner to be centered relative to the task module but spinner's parent containers have css rules messing up the whole alignment.

The html structure of spinner's containers is

<div class="embedded-page-busy-container" ng-if="ctrl.showLoadingIndicator">
    <busy-animation class="loading-spinner" size="medium"><div class="ts-spinner-internal size-2x">
        <div class="ts-spinner-container">
            <svg class="spinner-animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 4880">
              ...
            </svg>
        </div>
    </busy-animation>
</div>

The top-most div positions itself with top offset of 50%

    position: absolute;
    height: 100%;
    width: 100%;
    top: 50%;
    margin: -1.6rem 0 0 -1.6rem;

But the next container busy-animation sets the spinner in the middle of the parent container

    position: absolute;
    top: calc(50% - 2rem);
    left: calc(50% - 2rem);
    z-index: 1;

This combination makes it so the parent container is offest vertically by 50%, but the spinner is still in the middle resulting in the spinner sitting right at the botton of the task module.

Has anyone had this problem before or maybe there's a way to pass custom css to task module to override this behaviour?

For the sake of clarity attaching a screenshot of the spinner positioning in action. Feel free to ask for more information and/or screenshots

Thanks in advance

Spinner positioning

0 Answers
Related