I'm trying to implement the functionality with js history api and php/codeigniter4. That will allow the page to show progress/loader on the first visit when there's no page stored in browser history, but if the browser history page established and the user can back to the same page it will show the content directly without showing a progress/loader or some kind of bounce/resize html element when the content is fetched from the database and displayed to html element.

The real example like when navigating to twitter / yahoo mail pages it show the loader first then display content, but when navigate to other page and return to the previous page, it will show the content directly. I don't know how this kind of action how is called by name, but I hope I have understood what I mean. How can this be done.

script.js

(($)=>{
    // history page
    historySectionPage('.js-link-btn', 'href', '.result-container')
})(jQuery);

function historySectionPage(element = '', attr = 'href', container = '')
{
    $(document).on('click touch', element, function(e){
        e.preventDefault();
        let href = $(this).attr(attr);
        //------ user goback and forward -----------
        window.onpopstate = function(e){
            if(e.state)
                renderAjax(e.state.href, container);
        };
        //----- call page with history api ----------
        renderAjax(href, container);
        window.history.pushState({href: href}, '', href);    
    });
}

//ajax page render

function renderAjax(href, container)
{
    let req;
    req = $.ajax({
        url: href,
        method: 'GET',
        cache: false,
        dataType: 'html',
    });
    req.done((data) =>
    {
        let $res     = $(data), 
            $title    = $res.filter('title').text().trim(),
            $contData = $res.find(container).html();
            
        if(data){
            $('title').text($title);
            $(container).html($contData);
        }
    });
}

Thank you in advance!