Best way to show an error when your list fails to load data from the backend?

Question

• 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

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

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.