We have users complain to a visual difference between normal application view and waiting for a server response (that happens, actually, quite often, after pressing the button, changing the focus in the data grid, creating a new row, deleting a row, etc.). Time waiting is not so huge, up to 3 sec in most cases. The request is to avoid the visual difference (as far as this loading state appears quite often, it makes users irritated) but at the same time - to prevent any data from being changed (as while waiting the server respond, all application is not available for interactions). Can someone assume if it's possible - to lock data changing + not to have this overlay with a spinner? (The example shows the current realization)

enter image description here


Usually if data is loaded inside the grid (async, RXJS), it should be still valid to edit the filters (just keep in mind to have some debouncing).

  1. Try to focus the visual difference just on the part, which will be updated, in the given situation it's the grid itself.
  2. Also try to look for telerik's kendo UI grid, or syncfusion data-grid. They do have online samples, you could show your clients, so in the end they could decide the final look.
  3. Consider speeding up gird - under 3s is slow (despite being industrial standard); response below 1sec is acceptable, around 300ms is great. Try use paging or if the data is not too much, load it into memory!

You should limit yourself to only protecting fields and controls that actually matter, and don't try to shortcut the work by having a blanket mask.

For example, your "search" filter doesn't matter if the user changes something. It's not live data. So there is no need to disabled this area of the application.

If you are refreshing the grid of results then you should clear the grid initially and then show the loading graphic over the grid control only.

With regards to the "Search" buttons, etc. you can decide how they should behave based on what you want to happen. For example, you might want to disable the "Search" button while a search is in progress, and then re-enable it once the search is complete.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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