I'm struggling with a problem. So I have fetched all the pictures from a json file. It loads and works great. The only problem is that when I click on the HTML element, that supposed to load the new div element with the new pictures, it is always visible when the pictures are removed and reloaded with the new ones. I mean it jumps up and down for a millisecond, till the new elements are loaded. I try to make similar like this here 360 Ansicht, but much simple, if you scroll down you will see the "360 Ansicht".

let loadPictures = async function ( objectIndex, carColorIndex, carIndex, indexOfActiveCarPicture = 0 ) {
    const carsThreeSixty = await fetch( '/360view.json' );
    const carsThreeSixtyRes = await carsThreeSixty.json();
    let pure = Object.entries( carsThreeSixtyRes );

    const html = document.createElement( 'div' );
    html.classList.add( 'rim-pictures' );
    html.classList.add( 'active' );

    for ( let j = 0; j < pure[objectIndex][1][carColorIndex].imagesForRotating[carIndex].length; j++ ) {
        let newImg = new Image();
        newImg.src = pure[objectIndex][1][carColorIndex].imagesForRotating[carIndex][j];

        html.appendChild( newImg );
    }
    document.querySelector( '.three-sixty-angle-container .color-pictures.active' ).innerHTML = '';
    document.querySelector( '.three-sixty-angle-container .color-pictures.active' ).appendChild( html );
    $( '.three-sixty-angle-container .rim-pictures.active img' ).eq( indexOfActiveCarPicture ).addClass( 'active' );
};