Как добавить статус загрузки


Проблема

Все ненавидят, когда нужно ждать слишком долго, чтобы увидеть что-то в веб-приложении. Новые фронтенд-фреймворки (Vue, React, Angular) великолепны, но за их функциональность приходится платить: увеличение размеров конечных пакетов!

Как совет, вы должны проанализировать, превышают ли преимущества недостатки. В моем случае, например, мой проект — это большая система разведки, которая использует Vue3 и Quasar для разработки фронтенда. Я использую webpack vite, и конечный размер пакета SPA является больше около 600 кб. Это не слишком много, но если пользователь взаимодействует с помощью систем мобильных сетей, это может вызвать раздражение, особенно здесь, в Бразилии.

Решение

Я знаю, что в Vue и Quasar есть компоненты Loading, и мне они очень нравятся, но я могу использовать их только после того, как пакет скачан и загружен. Я хочу, чтобы пользователь видел некоторую анимацию до того, как Vue, Quasar и весь мой код будут загружены и разобраны. Что-то вроде этого:

И это будет работать на Vue, React или любом другом большом фреймворке, который вы используете, нужно только следовать этим правилам:

Магия заключается в том, что в коде не используется ни javascript, ни какая-либо большая ракетная наука. Он использует место <div id="app"></div> для запуска полосы загрузки, а когда Vue заканчивает загрузку и монтирует свое содержимое, загрузка заменяется HTML-узлами Vue. Вот так просто!

Помните, что это должно работать, если пользователь отключит javascript. Okey, не будет показывать Vue, но скажет пользователю, что ему нужно включить его, показывая ему что-то в тегах <noscript></noscript>.

1. CSS-код и анимация

Буду честен, я не являюсь эталоном в этом вопросе. Я использовал Google и stackoverflow, чтобы найти прогресс бар загрузки, который не использует Javascript. Нашел много, но ни один не был тем, что я ожидал, поэтому я смешал некоторые из них, и в результате получился этот CSS:

<style>
  .nspl {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 101;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .nspt {
    font-family: 'Roboto', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    font-size: 16px;
    padding-top: 16px;
    margin: 0 0 0 -76px;
  }
  #noscr {
    z-index: 99;
    margin: -200px 0 0 -250px;
    height: 400px;
    width: 500px;
    background-color: white;
  }
  .nalps {
    width: 120px;
    height: 120px;
    margin: -114px 0 0 -76px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }

  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>
Вход в полноэкранный режим Выход из полноэкранного режима

2. HTML для загрузки и установки приложения

Это довольно самоочевидно. Как мы уже говорили, я использовал место, где React или Vue будет монтировать свои данные, для размещения трех div’ов. Первый, контейнер <div class=nalp> будет содержать текст и анимацию (я выбрал его, потому что он кажется более красивым и информативным. Далее будет анимация изображения (class=nalps) и последним будет текст (<div class=nalpt>).

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

<div  id="app">
    <div class="nspl">
        <div id="nalp" class="nalps"></div>
        <div class="nspt">Loading... Wait!</div>
    </div>
</div>
Вход в полноэкранный режим Выход из полноэкранного режима

3. Как это работает:

Как только браузер загрузит все необходимые javascript и css, он запустит код Vue, который заменит загрузку на их App.vue и, происходит волшебство:

import  {  createApp  }  from  "vue";
import  App  from  "./App.vue";
const  app  =  createApp(App);
//i've put this here for you to see the animation
// remove the settimeout in production
setTimeout(()  =>  {
    //if you 
    app.mount("#app");
},  5000 /* waits five seconds for you see loading */);
Вход в полноэкранный режим Выход из полноэкранного режима

Лучший способ научиться чему-то — увидеть, как это работает. Так что берите на вооружение:

ССЫЛКИ:

  • Это моя первая статья, поэтому будьте снисходительны ко мне.
  • Если вы видите какие-то улучшения, которые можно сделать, пожалуйста, дайте мне знать в комментариях.
  • Если вам понравилась эта статья, пожалуйста, мотивируйте меня в комментариях.

Всем удачной недели!

Оцените статью
devanswers.ru
Добавить комментарий