Question 421996 in Laravel Question posted in
The official Laravel Documentation can be found here.

laravel/vue design: best way to handle a loader on a SPA while laravel is processing a job

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/Inertia/vue app, where each user has portfolios.
Portfolios rely on calculations which are usually done overnight.
When a user makes changes which needs recalculation to show a corret portfolio, I want to display a button allowing them to trigger a job which recalculates whenever user requires it.
While the recalculation job is running, I want to display a loaded-icon besides 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 portfolio is being processed and when it’s finished.

But what about the frontend? How do I infor differnt frontend components about that? shall 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 differnt components but what is usually best design or an easy way to have frontend components monitor some backend activities? recurrent axios calls every x seconds?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    It’s tough to pick the best design, but I think using WebSockets could work well here. You can check out Laravel Reverb and Laravel Echo for that. If you look at the official Laravel docs, there’s an example that’s pretty similar to what you’re working on.

    For example, imagine your application is able to export a user’s data to a CSV file and email it to them. However, creating this CSV file takes several minutes so you choose to create and mail the CSV within a queued job. When the CSV has been created and mailed to the user, we can use event broadcasting to dispatch an AppEventsUserDataExported event that is received by our application’s JavaScript. Once the event is received, we can display a message to the user that their CSV has been emailed to them without them ever needing to refresh the page.

    In the question you mention

    recurrent axios calls every x seconds?

    I think you’re talking about polling, which could help with your issue, but it comes with its challenges. If you decide to go for polling, you can check out the Inetra documentation; there’s a section that covers polling in detail.

    WebSockets and polling both have challenges. WebSockets offer real-time updates, which is great, but they can make things a bit complicated on the server side and use up more resources, making it tough to scale for big apps. Polling is easier to set up, but it can be pretty inefficient since it constantly pings the server, leading to more latency and extra load on the server.

    Resources –

    https://laravel.com/docs/11.x/broadcasting

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search