display elements asynchronously

[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.

[vigneshrajj]

@aman-gautam thoughts?