Nittro 2.0 – indikátor načítání dialogu napozadí

vrestihnat

Ahoj. Tak zase nittro koutek.
Potřeboval jsem oznámit uživateli, když klikne na nějaký odkaz, že se provádí ajax volání, jehož obsluha může trvat i dlouho ;)
Tj. např. zobrazit klasický „loading indicator“. Z dokumentace nittro mi nebylo jasné, jak to udělat, tak jsem vytvořil následující mojo, které ovšem funguje:

window._stack.push([function (di, DOM) {
            var page = di.getService('page');
            page.on('transaction-created', function (sender) {
              sender.data.transaction.on('ajax-response', function (resp) {
                $('#overlay').hide();
              });
              $('#overlay').show();
            });
            page.on('error', function (err) {
              $('#overlay').hide();
            });
          }, {
            DOM: 'Utils.DOM'
          }]);

Hrůza co?
Prosím o návrh lepšího řešení, případně mám alespoň dotaz na nittro autory, proč na Nittro.Page nelze pověsit call-back na „success“?
Díky

Mysteria

_context.invoke(function(di) {
	di.getService('ajax').on('request-created', function(event) {
		document.getElementsByClassName('loader')[0].style.display = 'block';
	});

	di.getService('snippetManager').on('after-update', function(event) {
		document.getElementsByClassName('loader')[0].style.display = 'none';
	});
});

woytam

Alternativou je využít vestavěných tříd Nittro. Pokud použiješ třídu nittro-transition-auto na body a k tomu si můžeš vybrat styl animace při načítání stránky (snippetu):

nittro-transition-fade – zatmavení
nittro-transition-slide – posun vlevo a s načtenou stránkou zpět
nittro-transition-dim – zatmavení
nittro-transition-bar – slabý červený načasovaný proužek nahoře stránky (jako youtube.com atp.)

Více info na https://github.com/…-transitions