Как корректно скрыть сообщения на странице Magento 2 после заданного таймаута?

Дано: Magento2, различные сообщения на странице ( о добавление товара в корзину, к сравнению, в вишлист и тд ).
По дефолту все сообщения продолжают висеть на странице пока ее не перезагрузить.

Нашел статью, в которой как раз то что мне надо - редактируется шаблон и js файл с тем чтобы сообщения эти автоматически скрывались после заданного времени. Все работает если выводимому сообщению предшествует перезагрузка страницы. Однако добавление в корзину работает работает без перезагрузки страницы, таким образом все это дело срабатывает только первый раз, дальше сообщение о новом добавлении остается невидимым. Вижу что в коде принудительно скрывается блок сообщений - $(self.selector).hide();, и если не перегрузить страницу, то данный блок так и остается display:none; понимаю, что нужно его вначале очистить, добавить вначале по событию, как бы напрашивается show() - вроде вижу где, но нет, что то видимо не так делаю.
Код из статьи:
шаблон:

<div data-bind="scope: 'messages'">
  <div data-bind="visible: isVisible(), click: removeAll">
    <!-- ko if: cookieMessages && cookieMessages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
      <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
        <div data-bind="html: message.text"></div>
      </div>
    </div>
    <!-- /ko -->
    <!-- ko if: messages().messages && messages().messages.length > 0 -->
    <div role="alert" data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
      <div data-bind="attr: {
            class: 'message-' + message.type + ' ' + message.type + ' message',
            'data-ui-id': 'message-' + message.type
        }">
        <div data-bind="html: message.text"></div>
      </div>
    </div>
    <!-- /ko -->
  </div>
</div>
<script type="text/x-magento-init">
  { "*": { "Magento_Ui/js/core/app": { "components": { "messages": { "component": "Magento_Theme/js/view/messages" } } } } }
</script>

Javascript

define([
    'jquery',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'underscore',
    'jquery/jquery-storageapi'
], function ($, Component, customerData, _) {
    'use strict';
    return Component.extend({
        defaults: {
            cookieMessages: [],
            messages: [],
            isHidden: false,
            selector: '.page.messages .messages',
            listens: {
                isHidden: 'onHiddenChange'
            }
        },
        /**
         * Extends Component object by storage observable messages.
         */
        initialize: function () {
            this._super();
            this.cookieMessages = $.cookieStorage.get('mage-messages');
            this.messages = customerData.get('messages').extend({
                disposableCustomerData: 'messages'
            });
            // Force to clean obsolete messages
            if (!_.isEmpty(this.messages().messages)) {
                customerData.set('messages', {});
            }
            $.cookieStorage.set('mage-messages', '');
        },
        initObservable: function () {
            this._super()
                .observe('isHidden');
            return this;
        },
        isVisible: function () {
            return this.isHidden(!_.isEmpty(this.messages().messages) || !_.isEmpty(this.cookieMessages));
        },
        removeAll: function () {
            $(self.selector).hide();
        },
        onHiddenChange: function (isHidden) {
            var self = this;
            // Hide message block if needed
            if (isHidden) {
                setTimeout(function () {
                    $(self.selector).hide();
                }, 5000);
            }
        }
    });
});

Спасибо.