Kendo UI Angular NotificationService gives weird stacked flickering when hiding previous and showing new one.

[Evert Wiesenekker]

I am investigating other product lines, currently I am using PrimeNG, and because of some problems I am testing your Kendo UI Notification component. First my code:

    toast$ = createEffect(() =>
        this.actions$.pipe(
            ofType(CoreActions.Toast),
            filter(({message}) => !!message),
            tap(({message, messageType}) => {
                this.currentNotification?.hide();
                this.currentNotification = this.notificationService.show({
                    content: message,
                    hideAfter: 5000,
                    position: {horizontal: 'right', vertical: 'top'},
                    //animation: {type: 'fade', duration: 400}, //NOTE: Adding an animation unfortunately causes the toast to stack very shortly when using the 'hide()' function..
                    type: {style: messageType, icon: true},
                    closable: false //NOTE: If true the 'hideAfter' property is ignored
                });
            })
        ),
    {dispatch: false} // Because only an action is done, we should not redispatch (that would cause an infinite dispatch loop of toasts)
    );

As you can see, my use case is not having stacked notifications but hiding the previous one if a new one arrives. Imagine the scenario, something is saving, and you want to show 'Saving...' and when saving has finished you present 'Saved!'. Having stacked notifications is weird from this perspective. 

Now the problem is when having an animation, the hiding and showing gives weird behaviour: for a very short time, the previous message shows up below the current and is hidden (flickering). If I disable the animation it works as expected.

[Stoyan]

Hi Evert,

Thanks for the information and code snippet.

The behaviour that is aimed can be achieved by utilizing the (in this case) currentNotification afterHide event emitter to do some custom logic after the notification has been hidden and with this approach the animation option can be used.

I've prepared a short StackBlitz demo that demonstrates the said above:

https://stackblitz.com/edit/angular-oeuacg?file=src%2Fapp%2Fapp.component.ts

I hope this information helps

Regards,
Stoyan
Progress Telerik