I have a mockup, shown below, presenting an error state if a data table doesn't load for some reason such as an API failure.

enter image description here

A developer asked whether the filter should even be shown if the content couldn't load. This may make sense if the failure occurs when first loading the page, as there's nothing to filter.

But, what if the error appears after the user adjusts filters. If the error state made everything disappear, including the filters, the user would be confused. But if the filters remained, then perhaps the user could change filters to reload some results - escaping the error in a sense.

A separate issue occurs to me: the filter options may also be retrieved via API. I could show a separate error state for that, but then things seem to be getting complicated.

Overall, I'd like to hear some best practices for how to present error/empty states gracefully in this scenario, or how others have successfully handled similar situations.

2 Answers 2


The filter in a normal table design will be shown until the data is loaded. If an error occurs, hiding the filter from the user would not be professional and it's confusing for the user to see something removed from the screen. from my experience, you can do many things like

  1. you can freeze or disable (block) it instead of removing it altogether.
  2. You can move the filter to the popup, open the popup with a button, and then disable the button.
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Feb 6 at 9:08

If the function of the page doesn't work due to an error with connecting to the API or on the API side, then I would either disable the buttons on the page (so the user doesn't keep trying stuff that won't work) or disable the entire page and blur it. Then show a clear message in a centered box that explains the page can't be used at the moment.

So just disable everything except the reload button, and enable everything when reloading works.

  • This is for a loading or API error. There would be a different message if their filter gave no results. What about when the page first loads, and there's an error? Would I still show the filter, or not show it - since there's nothing to filter?
    – turpentyne
    Commented Feb 6 at 15:51
  • @turpentyne If the page is literally unusable (API cannot be reached or just doesn't function) then yes I would disable the filters, so users don't waste time trying to fix something that can't be fixed. In fact I'd just show a message in the center with the rest of the page blurred out so they literally can't do anything. I will edit my answer, Commented Feb 7 at 7:47

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.