Estoy tratando de implementar la funcionalidad con js history api y php/codeigniter4 . Eso permitirá que la página muestre el progreso/cargador en la primera visit cuando no haya una página almacenada en browser history , pero si la página del historial del navegador se estableció y el usuario puede volver a la misma página, mostrará el contenido directamente sin mostrar un progreso/ loader o algún tipo de elemento html de rebote/cambio de tamaño cuando el contenido se recupera de la base de datos y se muestra en el elemento html.

El ejemplo real, como al navegar a las páginas de twitter / yahoo mail , muestra primero el cargador y luego muestra el contenido, pero cuando navega a otra página y regresa a la página anterior, mostrará el contenido directamente. No sé cómo se llama este tipo de acción por su nombre, pero espero haber entendido lo que quiero decir. ¿Cómo se puede hacer esto?

guión.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); }); }

// representación de la página ajax

 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); } }); }

¡Gracias de antemano!