Accelerate Your UI Development

Using Toast Notifications In Web App with Realtime Updates

The scenario where multiple toasts are presented

There are some scenarios where incorporating multiple toast notifications on the same web page is necessary. As explained in my previous article, toast messages should be temporary notifications that come in and leave after a few seconds; otherwise, you will have a stacking problem. It is distracting to see so many brief alerts come on-screen. One way to handle so many toast notifications is to group them. Yet if your web application is providing realtime information to the user, it will be necessary for the toast message to remain on the screen.

For example, let’s say your web application goes into a state where it needs to execute a long-running process, and you don’t want to block the user from being able to navigate and interact with other features of the web site. Instead, show the toast notification with some determinate or indeterminate loader and then update the contents of the toast with actionable elements: a download link and a close icon, for example.

Toast with loader and action buttons. Desktop app example but you get the idea.

This type of toast notification pattern is incredibly useful, especially in business settings where ad-hoc financial records can take some time to retrieve from a database. 

Consider a full-featured notifications area

If you are working in an industry where several long-running processes may need to queue in parallel, you might consider implementing a more informative notifications area. Typically, notifications areas are static and refresh during a page route. A full-featured notifications area, where you can see and modify the state of a running process, is a much cleaner method to organize such realtime updates in a web application.

Notification area providing status on events.

Testing the setup

It is crucial to test your message notifications. Perform unit testing on the UI components to make sure that events are raised and captured correctly. Create robust End-to-End tests that can check each path that generates toast notifications.


It is imperative to consider your notifications scheme when planning your web applications UI. Many questions should be asked from the product managers and designers on how messages will be raised to the people utilizing your web product. Especially if we are going to be dealing with realtime data and wish to provide the user with a seamless UX.