@checksub_team/peaks_timeline/src/components/loader.js

JavaScript UI component for displaying audio waveforms

define([
  'konva'
], function(
  Konva
) {
  'use strict';

  var RADIUS = 5; // px

  function Loader() {
    var spacing = RADIUS * 3.5; // Spacing between circles

    this._group = new Konva.Group({
      listening: false
    });

    var circles = [];

    for (var i = 0; i < 3; i++) {
      var circle = new Konva.Circle({
        x: (i - 1) * spacing,
        radius: RADIUS,
        fill: '#ffffff',
        listening: false
      });

      circles.push(circle);
      this._group.add(circle);
    }

    // Animation for the loading circles - each circle pulses with different timing
    this._loadingAnimation = new Konva.Animation(function(frame) {
      var time = (frame.time / 2200) % 1; // Complete cycle in exactly 2.2 seconds

      for (var i = 0; i < circles.length; i++) {
        var phase = (time - i * 0.15) % 1; // Each circle is offset by 1/5 of the cycle
        var scale = 0.5 * (Math.sin(phase * Math.PI * 2) + 1);

        circles[i].radius(RADIUS * scale);
      }
    }, this._group.getLayer());

    this._loadingAnimation.start();
  }

  Loader.prototype.x = function(x) {
    if (typeof x !== 'number') {
      return this._group.x();
    }
    this._group.x(x);
  };

  Loader.prototype.y = function(y) {
    if (typeof y !== 'number') {
      return this._group.y();
    }
    this._group.y(y);
  };

  Loader.prototype.addTo = function(layerOrGroup) {
    layerOrGroup.add(this._group);
  };

  Loader.prototype.destroy = function() {
    this._loadingAnimation.stop();
    this._group.destroy();
  };

  return Loader;
});