Прелоадер для страниц

[delgus]

Были у меня actions которые долго отрабатывали и в результате страница зависала и придумал я вот такую хардкорную штуку

Код: Выделить всё

class SiteController extends Controller
{
    public function init()
    {
        parent::init();
        Yii::$app->on(Application::EVENT_BEFORE_ACTION, function ($event) {
            $actions = ['view', 'wait-to-solved', 'redirect', 'upload', 'inwork', 'solved'];
            foreach ($actions as $action) {
                if ($event->action->id == $action) {
                    echo '<div id="preloader">Идет загрузка...</div>';
                    ob_implicit_flush(false);
                    flush();
                }
            }
        });
        Yii::$app->on(Application::EVENT_BEFORE_ACTION, function ($event) {
            $this->getView()->registerJs('$("#preloader").hide()');
        });
    }
  }

Ну естественно она не работала при redirect, а потом отвалилась потому что HeadersAlreadySentException. Можно ли как-то заставить этот скрипт отрабатывать. Или же надо везде переходить на ajax запросы, или использовать pjax, или вообще жестко хардкорить во вьюхах прописывая $.ajax beforeSend. Есть какие-то простые инструменты во фреймворке чтоб реализовать прелоадер на странице, когда ты долго ожидаешь ответ от сервера. В AJAX не очень шарю, могу конечно прописать в видах $.ajax или создавать XmlHttpRequest на чистом js. Просто хотелось найти более менее лаконичное и удобное решение.Есть предложения?

[urichalex]

Не надо ничего выводить в контроллере. Накладывайте прелоадер javascript'ом

[yan]

https://github.com/edgardmessias/yii2-nprogress

[delgus]

Самый удобный и практичный способ
1.Обернуть страницу в Pjax(Как оказалось - очень удобный инструмент, спасибо разработчикам).
2.Ну и в видах повесить на событие beforeSend необходимые действия

Код: Выделить всё

 $js = <<<JS
        $(document).on('pjax:beforeSend', function() {
           $('.appeal-list').hide();
           $('#loader').show();
        })
JS;
    $this->registerJs($js);

[proctoleha]

Самый удобный и практичный способ
1.Обернуть страницу в Pjax(Как оказалось - очень удобный инструмент, спасибо разработчикам).

Только не забывайте, что в ветке 2.1 pjax уже нет, т.к. по мнению разработчиков он очень капризен

[Alexum]

Если необходимость в такой анимации есть во многих местах проекта, то имеет смысл в AppAsset добавить js-файл а не писать код во view. Кстати https://github.com/vadimsva/waitMe неплохое решение с массой настроек.

Код: Выделить всё

// Отображаем лоадер
$(document).on('pjax:start', function() {
            $('body').waitMe({
                effect: 'ios',
                bg: 'rgba(0,0,0,0)',
                color: '#FFF'
            });
});

// Скрываем лоадер
$(document).on('pjax:end', function() {
    $('body').waitMe('hide');
});

Самый удобный и практичный способ
1.Обернуть страницу в Pjax(Как оказалось - очень удобный инструмент, спасибо разработчикам).

Только не забывайте, что в ветке 2.1 pjax уже нет, т.к. по мнению разработчиков он очень капризен

К величайшему сожалению.