It is a design question, and though I am a full stack dev, I am weaker on frontend UX stuff:
I am creating a laravel application with Inertia and Vue, where each user has portfolios. Portfolios rely on calculations which are usually done overnight. When a user makes changes that need to be recalculated to show the correct portfolio, I want to display a button that allows them to trigger a job that recalculates whenever the user requires it. While the recalculation job is running, I want to display a loaded icon beside the portfolio indicating that recalculation is being processed, followed by a check icon when it's done. Recalculation can last 1-2 minutes.
As we have different components working together I am not sure which would be the best way to solve that: What is clear is the button, which makes an axios call to the backend to a controller which triggers a Job for recalculation, and on the corresponding table a mark that the portfolio is being processed and when it's finished.
But what about the front end? How do I inform different frontend components about that? Should I store a pinia state, and how would I update it once the job is processed? I know I can create watchers or reactive params on different components but what is usually the best design or an easy way to have frontend components monitor some backend activities? recurrent axios calls every x seconds?
I'm not sure that using Pinia is appropriate with Inertia, it's a server-side rendered front-end, and although there are packages that allow state persistence after a server-to-client reload via localStorage (https://github.com/prazdevs/pinia-plugin-persistedstate), it may not be necessary.
And since a server-side call is made with page changes, it's possible to use the middleware proposed in the documentation (https://inertiajs.com/shared-data).
Ideally, you'd like to use a socket to do this, but it all depends on your need and cost.
Maybe we can simply put the process on hold and process an email or notification as soon as it finishes.