Turbo page loading question

Need Help
#1

I use turbo pages and lazy loading partial update.

My code sample:

public function onFetchItems()
{
    sleep(3); // for an example of getting a large amount of data

    // ...
}

{% if items %}
    // ...
{% else %}
    <div class="loader"> Loading the results... </div>

    <div
        data-request="onFetchItems"
        data-request-update="{ _self: true }"
        data-auto-submit>
    </div>
{% endif %}

When I visit the page, I see the product table for a split second and then the loader appears. It doesn’t look very nice. How can I fix this?

Screen record as a sample — Dropbox - Screen Recording 2024-12-06 at 10.49.28 AM.mov - Simplify your life

UPD:
Right now I use this hack:

<div class="items" data-turbo-no-cache>
    {% ajaxPartial 'items/items-table' %}
</div>

addEventListener('page:before-cache', function() {
    document.querySelectorAll('[data-turbo-no-cache]').forEach(function(el) {
        el.innerHTML = '<div class="uk-padding-small">Loading the results...</div>';
    });
});

I think we need to add a new option for ajaxPartial — disableCache or something like that, to prevent caching div-block while turbo router is set on. Or any another ideas?