Scrolls to top on recalculate().

[jringeisen]

Hi 👋 I've implemented infinite scrolling with the Pexels API and when I scroll down to load new results the scroll bar jumps to the top of the screen. The new images are loaded but I now have to scroll all the way back down and when I do it jumps back up again. If I remove the macy.js code it works fine but then I don't have the masonry effect. Any ideas on what could be causing this? I'm using Laravel and Livewire, could Livewire be interfering?

<div>
    <div id="macy-container" class="relative grid grid-cols-4">
        @foreach($images as $key => $image)
            <div x-data="{ show: '' }" @mouseover="show = {{$key}}" @mouseleave="show = ''" class="group cursor-pointer">
                <img wire:click="$emit('openModal', 'pexels.modals.view', {{ json_encode(['image' => $image]) }})" src="{{$image['src']['large']}}"/>
                <div x-show="show === {{$key}}" x-transition class="absolute bottom-0 w-full">
                    <div class="flex items-center justify-between w-full bg-black bg-opacity-50 px-2 py-2">
                        <a href="{{$image['photographer_url']}}" target="_blank" class="ml-1 text-white text-xs font-semibold md:text-sm">
                            {{$image['photographer']}}
                        </a>
                        <div class="flex items-center">
                            <span class="mr-3">
                                <svg wire:click="downloadImage('{{$image['src']['original']}}')" class="w-4 h-4 text-white cursor-pointer md:w-6 md:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
                            </span>
                            <span>
                                <svg wire:click="$emit('openModal', 'pexels.modals.create', {{json_encode(['photo_data' => $image])}})" class="w-4 h-4 text-white cursor-pointer md:w-6 md:h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-5L9 4H4zm7 5a1 1 0 00-2 0v1H8a1 1 0 000 2h1v1a1 1 0 002 0v-1h1a1 1 0 000-2h-1V9z" fill-rule="evenodd"></path></svg>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div x-data="{ shown: false }" x-intersect="$wire.call('loadMoreImages', '{{$next_page_url}}')" class="flex justify-center"></div>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/macy@2"></script>
@endpush

@push('js')
    <script>
        document.addEventListener('livewire:load', function () {
            const macy = Macy({
                container: '#macy-container',
                trueOrder: false,
                waitForImages: false,
                margin: 18,
                columns: 5,
                breakAt: {
                    1200: 5,
                    940: 3,
                    520: 2,
                    400: 1
                }
            });

            document.addEventListener('livewire:update', event => {
                macy.runOnImageLoad(function () {
                    macy.recalculate(true);
                });
            })
        })
    </script>
@endpush

[ignacio-dev]

I'm having the same issue.. While using a window.scrollTo() solves the problem, it causes the whole thing to flicker

EDIT:
Setting waitForImages to true solved my flickering issue