Function not executing before .forEach

Question

I'm having some problems showing my loading icon, before a function is executing. It seems to be showing at the same time my new elements are being appended to the DOM. I'm expecting to have many elements, so a loading icon is necessary as these new elements are being built.

A breakdown of what I want to happen

1. Show loading icon
2. Build new elements and append to DOM
3. Hide loading icon

Generate Dummy Elements

<div class="loader"></div>
<button>Duplicate Items</button>

<section class="grid">
    <?php for ($i = 0; $i < 1000; $i++) :
        $randH = rand(1, 10);
        $randW = rand(1, 10);
        $imgUrl = 'http://placehold.it/' . $randH . 'x' . $randW;
    ?>
        <article class="grid__item">
            <img src="<?php echo $imgUrl; ?>" height="<?php echo $randH; ?>" width="<?php echo $randW; ?>">
            <p>Hello <?php echo $i; ?></p>
        </article>
    <?php endfor;?>
</section>

<section class="gallery></section>

Javascript Functions

let createGallery = () => {
    let gridItems = document.querySelectorAll('.grid__item'),
        gallery = document.querySelector('.gallery'),
        gridArray = Array.prototype.slice.call(gridItems, 0);

    // create new elements
    gridArray.forEach((item, index) => {
        let galleryItem = document.createElement('article'),
            img = item.querySelector('img').attributes,
            markup = {
                caption: item.querySelector('p').innerHTML
            },
            template = `<article class="gallery__item">
                            <img class="gallery__item__img" src="{{src}}" height="{{height}}" width="{{width}}">
                            <figcaption>{{caption}}</figcaption>
                        </article>`;

        for (let i = 0; i < img.length; i++) {
            markup[img[i].nodeName] = img[i].nodeValue;
        }

        Object.keys(markup).forEach(function(key) {
            let regEx = new RegExp('\{\{' + key + '\}\}', 'g');
            template = template.replace(regEx, markup[key]);
        });

        galleryItem.innerHTML = template;
        galleryItem.className = 'gallery__item ' + index;
        gallery.appendChild(galleryItem);
    })

    // after all images have been added > hide loader
    $('.loader').removeClass('is-active');
};

let initGallery = () => {
    // show loader, before creating gallery
    $('.loader').addClass('is-active');

    // create new elements
    createGallery();
}

let $button = document.querySelector('button');
$button.addEventListener('click', initGallery);