Layout breaks when changing data too fast

[Horoneru]

Hello !

My application allows the user to "push" the list the isotope layout uses either to the right or the left, wrapping the last or first element back to being the first or last respectively.

Here is what it looks like :

Unfortunately, if the user "pushes" the array too fast, the layout breaks and the visible array of elements are duplicated, even though the list managed by Vue.Isotope itself is still 20 items :

For now, the application works around this by debouncing the action of the user. It seems changing the possible timing of the changes done to the list allows the problem to be minified.

Still, when clicking to a certain rhythm, the same issue still occurs. I could nullify it entirely by setting an higher debounce limit, but this would hinder the user experience.

For reference, here's the push code : The vue :

    pushBack: function() {
      if(this.setupInit) {
        let newArray = utils.pushBack(this.tab);
        this.arrangeArray(newArray);
      }
    },
    arrangeArray: function(newArray) {
      // It seems I must do that to trigger a change.
      // Else it will apply the new array without doing anything visually
      this.tab.splice(0, 20);
      setTimeout(() => {
        this.tab = newArray;
        // [...]
      }, 0);
    }

The utils :

  pushBack: function (array) {
    let newArray = [];
    for (let index = 0; index < array.length; index++) {
      if (index === array.length - 1) {
        newArray[0] = array[index];
      }
      else {
        newArray[index + 1] = array[index];
      }
    }

    return newArray;
  }

Any help would be appreciated !

[Abbe98]

I'm having this issue too and the data change rate does not need to be very fast for it to happen.

[weavermedia]

I get the same problem when using plain Isotope so it may not be related to this component version.

[jordanboston]

Yes, this happens to me with just plain isotope as well. If anyone has any way to solve this in regard to isotope, that would be fantastic.