In this episode, we focus on fetching and displaying the individual states of our server tasks. Rather than starting the queue right away, we add some helper methods to our server task model for each state—pending, in progress, complete, and failed—using a handy equals
method from our models state package. This lets us check the state of each task in a really clear way.
Once those helpers are in place, we update our UI so that each task clearly shows if it's pending, in progress, complete, or failed. We wrap each task's display in Blade conditional statements to selectively show the relevant info based on its state. To make it even clearer visually, we tweak the background color of a progress line to change depending on whether the task is complete or not.
Before moving on to more dynamic stuff like polling, we do some manual testing—flipping the states of a few tasks and checking that the UI updates as expected. The end result is a much more responsive interface that accurately reflects what's happening behind the scenes.
By the end of this video, you'll know how to tie task states to your UI, leaving you free to get creative with the way things look! Next up, we'll see how to automatically keep these task states in sync as they're updated.