This box animation should be always smooth. Check FPS meter in Chrome devtools > Rendering > FPS Meter

---

# Long running loop

        
function* work() {
  const iterable = 'Absent gods.'.split('');
  let result = '';

  for (let item of iterable) {
    let x = 0;

    while (x < 2000000) {
      x = x + 1;

      // Tell sinergia when the task can be interrupted and resumed later
      if (x % 100000 === 0) yield result;
    }

    result += item; // Simple result of task
    console.log(`Result of iteration:`, result);
  }

  yield result; // Yield latest result
}
      

---

---

# Long Merge sort

        
const largeList = new Array(100000);
for (let i = 0; i < largeList.length; i += 1) largeList[i] = Math.floor(Math.random() * 10000);

function* work(values) {
  const sort = function*(array) {
    const len = array.length;
    if (len < 2) {
      return array;
    }
    const pivot = Math.ceil(len / 2);
    return yield* merge(
      yield* sort(array.slice(0, pivot)),
      yield* sort(array.slice(pivot))
    );
  };

  const merge = function*(left, right) {
    let result = [];
    while ((left.length > 0) && (right.length > 0)) {
      if (left[0] > right[0]) {
        result.push(left.shift());
      }
      else {
        result.push(right.shift());
      }
    }

    result = result.concat(left, right);
    if (result.length > 100) {
      // Pause when the merges start to become expensive
      yield result;

      // Don't always log
      if (Math.floor(Math.random() * 10) === 1) console.log('I\'m working...');
    }
    return result;
  };

  return yield* sort(values);
}