[bug] Notification toast does not close on slow internet connections

The frontend performs two operation upon receiving a notification on websocket:

It displays the notification
It reloads the notification widget

On a slow network, it can take time to reload the widget while the notification toast is already being displayed (notification content is sent via WS).

Clicking on the close icon of notification toast not only closes the notification toast but also flags the notification as read(by removing the unread class of the notification element in notification widget and updating the backend via WS). Performing above observation in a state where notification widget is still reloading yields this on console:

As a result, the notification toast does not get closed.

Following code is responsible for flagging notification as read.

openwisp-notifications/openwisp_notifications/static/openwisp-notifications/js/notifications.js

Lines 324 to 338 in 67f344b

    
           function markNotificationRead(elem) { 
        
               let elemId = elem.id.replace('ow-', ''); 
        
               notificationSocket.send( 
        
                   JSON.stringify({ 
        
                       type: 'notification', 
        
                       notification_id: elemId 
        
                   }) 
        
               ); 
        
               try { 
        
                   document.querySelector(`#${elem.id}.ow-notification-elem`).classList.remove('unread'); 
        
               } catch (error) { 
        
                   throw error; 
        
               } 
        
               notificationReadStatus.set(elemId, 'read'); 
        
           }

Possible Fix
Remove the throw error statement form the catch clause.

That is, make the UI change instantaneous and let the server sync happen in the background?

	function markNotificationRead(elem) {
	let elemId = elem.id.replace('ow-', '');
	notificationSocket.send(
	JSON.stringify({
	type: 'notification',
	notification_id: elemId
	})
	);
	try {
	document.querySelector(`#${elem.id}.ow-notification-elem`).classList.remove('unread');
	} catch (error) {
	throw error;
	}
	notificationReadStatus.set(elemId, 'read');
	}