Javascript weird behavior on first load

I recently started using turbolinks on my project and created a preloader, i’m facing an issue where sometimes javascript doesn’t get fired in my preloader.js file.

Example:

$(function() {
    window.addEventListener("load", function load(event){
        doneLoad()
    })

    gsap.set('html, body', {
        overflowY: 'hidden'
    })

    $(document).on('turbolinks:click', function(){
        startLoad()
    });

    $(document).on('turbolinks:load', () => {
        setTimeout(() => {
            doneLoad()
        }, 500)
    });


    function startLoad() {
        setTimeout(() => {
            window.scrollTo(0, 0);
        }, 500);
        

        gsap.timeline()
        .set('html, body', {
            overflowY: 'hidden'
        })
        .set('.turbo__loader', {
                    visibility: 'visible'
                })
        .to('.turbo__lines', {
            stagger: .3,
            height: "100%",
            duration: .5
        })
        .to('.turbo__logo, .__loader', {
            opacity: 1, 
            duration: .3
        }, '-=.3')
    }

    function doneLoad() {  

        console.log('Done Loading'); //<----Always fires

            gsap.timeline() //<----Doesn't always work
            .set('html, body', {
                overflowY: 'unset'
            })
            .set('#app, #__footer', {
                visibility: 'visible', 
            }, 'add')
            .add('do')
            .to('.turbo__lines', {
                stagger: .3,
                height: '0%'
            })
            .to('.turbo__logo, .__loader', {
                duration: .3, 
                opacity: 0
            }, 'do')
            .to('.turbo__loader', {
                visibility: 'hidden'
            }) 
    }

});

console.log in the doneLoad() function is always firing but gsap.timeline not always, I’m not seeing any errors, what could be the issue here? It only happens at the first load after that i never faced an issue.