Redraw glitch when list of task is long

[bobylito]

Bug description

This is a visual bug. When the list of items is bigger than the screen height, the list starts glitching.

Reproduction

const task = require("tasuku");

(async function test() {
  let iteration = 0;
  while (true) {
    await task(
      `Run ${iteration} -- with long text it is more visible`,
      () => new Promise((resolve) => setTimeout(() => resolve(), 100))
    );
    iteration++;
  }
})();

Environment

• tasuku version: 1.0.2
• Operating System: MacOS 12.0.1 with ITerm2 3.4.12
• Node version: 14.18.0 and 15.14.0 (inside docker)

[privatenumber]

This is a known limitation in Ink, the renderer tasuku is using. It might be by design since only re-rendering what's in the viewport could break native scrolling.

To work around this, I recommend limiting your list so that it's not longer than your viewport. This leads to better UI/UX anyway, so it's an overall plus.

If your processing flow is in series, run clear() on each completed task so it's removed. If in async, use a concurrency manager like p-map so it only does n number of tasks at once. I have also consolidated a large list of tasks to one and updated the count of completed ones via setStatus or setOutput instead.

I will leave this open until I add a "Best practices" section in the README recommending this.

[bobylito]

Thanks for following up on this issue. Your recommendations are great.