Skip to content

display elements asynchronously #112

Description

@vigneshrajj
await this.elements.sleep(2500);

Instead of using the sleep method to wait for an element to finish, we can create a method to make the elements asynchronous. Since estimating how long the element will stay on the screen leads to overlap issues which could be avoided by having a method like this:

async finish(elmName: ElementName) {
    return new Promise((resolve) => {
      setTimeout(() => {
        if (this[elmName].state.attributes.visibility === 'hidden') {
          resolve({});
        }
      }, 50);
    });
  }

https://github.com/PointMotionInc/activity-experience/blob/33013b4a1ea01449c1d35f0551c4173f8da81fa5/src/app/services/game/sit-to-stand/sit-to-stand.service.ts#L182-L193
The above code will be re-written as:

      async (reCalibrationCount: number) => {
        this.elements.ribbon.state = {
          attributes: {
            visibility: 'visible',
            reCalibrationCount,
          },
          data: {
            titles: ['A Guide to Sit, Stand, Achieve'],
          },
        };
        await this.elements.finish('ribbon'); // waits for the element to finish
      },

This will ensure elements don't overlap with each other and also avoid too much timeout between two elements.

The sleep method can still be used for adding extra timeout.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions