Загрузчик общего хода выполнения, который будет автоматически и последовательно отображаться во всем приложении angular

В то время как серверная часть выполняет работу по обеспечению соблюдения бизнес-логики, передняя часть выполняет работу по обеспечению того, чтобы пользователь мог легко найти то, что он ищет, и завершить свою задачу. Чтобы это сработало, пользователю необходимо изучить согласованные представления и страницы, которые выглядят одинаково или похоже во всем приложении. Кнопки с призывом к действию должны выглядеть одинаково и располагаться в одном месте, таблицы должны выглядеть и ощущаться одинаково, также как и подробный вид. Ваша задача как фронтенд-разработчика - убедиться в этом - а это непростая задача, учитывая, что вы можете работать в более крупной команде с разработчиками с разными идеями. Вот почему очень важно, чтобы некоторые повторяющиеся вещи, такие как загрузчики прогресса, обрабатывались по принципу «сделай и забыл» - вы выполняете их один раз, а затем они просто работают. Это самый простой способ добиться согласованности, хотя он возможен не во всех сценариях.

Загрузчики прогресса - довольно важный компонент UX, поскольку они дают пользователю обратную связь о том, что что-то происходит. Скорее всего, вы используете его в своем приложении. И, скорее всего, код выглядит примерно так:

Это сработает, но я столкнулся с таким решением в команде разработчиков, и в некоторых представлениях отсутствовала часть, где isLoading не сброшен на error, поэтому загрузчик просто продолжал показывать, или представления, у которых не было загрузчика вообще. Однако некоторые представления были выполнены правильно, хотя и повторением того же кода. Таким образом, это решение оказалось неустойчивым и привело к непоследовательному UX.

Несмотря на то, что есть некоторые библиотеки для загрузчиков прогресса, они по-прежнему требуют, чтобы вы управляли ими для каждого компонента. Мы хотели уйти от этого.

Решение

Наш загрузчик прогресса просто автоматически показывает каждый раз, когда есть сетевой вызов, поэтому вам, как разработчику, не нужно об этом думать. На самом деле вы даже не знаете, что есть загрузчик прогресса, пока не запустите свой код для тестирования.

Что мы сделали, так это поместили индикатор выполнения поверх приложения, чтобы он был виден на всех страницах. Вы можете сделать это в app.component или в другом подходящем компоненте вашего приложения. Возможно, у вас есть панель инструментов, которая отображается над всеми страницами, или у вас есть какой-то домашний или макетный компонент, который является своего рода базой для всех других компонентов - вы также можете поместить туда индикатор выполнения.

Затем создайте службу с одним Boolean. Идея состоит в том, чтобы установить это Boolean, когда есть сетевой вызов, и сбросить его, когда сетевой вызов завершится. Однако служба будет только объявлять Boolean, но, поскольку она не может знать, когда есть сетевой вызов, больше ничего делать не будет.

Затем убедитесь, что вы показываете индикатор выполнения, когда эта служба имеет значение true, и скрываете, когда это false. Подойдет простой ngIf.

Наконец, создайте перехватчик, который будет устанавливать и отключать Boolean в службе загрузки.

С этого момента вам просто наплевать на загрузчик прогресса. Он будет автоматически и последовательно отображаться на каждой странице при каждом сетевом вызове, давая пользователю знать, что что-то происходит в фоновом режиме.

Заключение

Это сократит шаблонный код в компонентах, позволяя разработчикам заботиться о других вещах, а не о согласованности, поскольку это уже будет достигнуто.
Если вы будете повторять код во всех компонентах в надежде достичь согласованности, вы потерпите неудачу. Иногда разработчики забывают повторить код или придумывают решение, отличное от предыдущего (я не буду их винить), или если вы решите изменить часть дизайна, перебор всего станет утомительным процессом. компонентов в приложении и обновите его. Таким образом, у вас есть только одно место, где его можно изменить.