How to make a component not refresh everytime?

Hello to everyone, I have a Header Livewire component, where inside I have HTML and other livewire components. I'll make it very short. The component inside the Header we'll call it TopSong. This TopSong takes care of fetching a custom API, takes its data from it, puts it in the cache and then displays anything that is in the cache with the cachekey that I assigned to it. So instead of rendering the actual values, I render the values ​​from the cache. My question now shifts to a performance factor. This component, unfortunately, has the directive to: @persist And therefore it is available in every view, always on the screen but... Whenever I have to enter the Landing Page for the first time, it takes 5 seconds to load completely and, until then, if I have to do anything on my site web, even a single navigation via NavLinks, everything stops, waiting for TopSong to finish loading. I also added the Lazy and skeleton loading properties, which make everything even slower, but at least I have a loading so the user can understand that it is still loading.

The question: Is there a way to "intercept" user-made events and say: "Look man, even if you still loading, give priority to the user event (be it a form, nav-link or other), and in the background, continue to load the header without blocking anything else)?

My code has been optimized several times, the queries made are minimal (3 queries with no duplicates), I also have error management so that, if the component does not receive anything from the API, it sends a custom error to the screen. If you want to see the code, tell me and I will edit the post by also adding the respective codes.

Thanks to everyone!