Weird overlapping and performance issue

[naglalakk]

Hi and thank you for this plugin. I'm having a weird issue with the masonry. I'm using scroll to update a photo gallery so each time a user scrolls down to the bottom more images are added (40 each time) until the gallery is complete.

When adding images the masonry takes a fairly long time to arrange them into correct positions and adjust the whole grid correctly, leaving them in a awkward state for a few seconds See pic here: https://ibb.co/TwCkS0m

This could absolutely be my implementation. But I fail to see which steps I'm missing. After going through some similar issues here I see that people solved this with the imagesLoaded plugin where they redraw the masonry on each image processed.

This is the code which handles loading the initial batch for the photo gallery

    loadAlbum() {
        var self = this
        this.loadGalleryById(
            this.currentAlbumId, this.page, this.perPage
        ).then(data => {
            self.images = data.map(x => Object.freeze(x))
        }).catch(err => {
            console.log(err)
        })
    }

And here is the code that handles addding more images on scroll

                self.loadGalleryById(
                    self.currentAlbumId,
                    self.page,
                    self.perPage
                ).then(data => {
                    self.images = self.images.concat(data.map(x => Object.freeze(x)))
                })

The template

    <div v-images-loaded:on.progress="imgsLoaded">
        <div v-masonry class="masonry-container" :gutter="10" :column-width="15" item-selector=".item">
            <div v-masonry-tile class="item" v-for="(item, index) in images">
               <!-- block item markup -->
                <a v-bind:href="item.source_url" data-lity>
                   <img width="100%" v-bind:src="item.media_details.sizes.thumbnail.source_url" />
                </a>
            </div>
        </div>
    </div>

The imagesLoaded handler

    imgsLoaded(instance, image) {
        console.log('redrawing')
    this.$redrawVueMasonry()
    }

When adding images the jsheap seems to get pretty big. For about 200-300 images it goes up to 140mb. The images are only thumbnails and are kept in objects which do not contain a lot of info. In the code above I also do Object.freeze(x) to each object to keep them immutable.

[shershen08]

Hello @naglalakk could you check #44 does that sound similar ?

[naglalakk]

Hi I had to use another solution because of time constraints so I'm not debugging this atm. I checked the #44 issue and this code should be doing the very same thing. But I didn't get it to work for some reason. I'll close this and reopen if I look into this further. Thank you