enter image description here

  • I have a master detail view that looks like this when data loads successfully from the backend
  • If you click on any item, it will show details on the right side (empty currently)
  • What do I do if there is an error while loading the list on the left?

Option 1

  • One option I can think of is to show a snackbar at the top center of the page but what do I show in place of the list?

Option 2

is this good?

How to handle the right panel here. Any better ideas?

1 Answer 1


Here's what I would suggest:

  • Have an "empty state" for the Master and Details view. For the details pane, I assume it would say something like this: "Please select from the list."
  • Have a loading state where only the Master pane has a spinner or skeleton loading animation.
  • When an error occurs, show a Modal window that lets the user know what the problem is and offers an option to "try again."

The last point is somewhat controversial, so here's my point of view: unless there's some other content on the page that the user could benefit from, it's better to layer the error away from the page as it is more prominent and focused. Bonus: this creates a difference in perception, as a modal is viewed as something temporary as opposed to being an integral part of the page/UI.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.