로딩 상태를 추가하는 방법

문제

웹앱에서 무언가를 보기 위해 너무 오래 기다려야 할 때 모두가 싫어합니다. 새로운 프런트엔드 프레임워크(Vue, React, Angular)는 훌륭하지만 더 큰 최종 번들 크기와 같은 비용으로 기능을 제공합니다!

조언으로 단점보다 이점이 더 큰지 분석해야 합니다. 예를 들어 제 프로젝트는 프론트엔드 개발에 Vue3과 Quasar을 사용하는 빅 인텔리전스 시스템입니다. webpackvite을 사용하고 있으며 SPA의 최종 번들 크기는 약 600kb 정도 더 큽니다. 그다지 많지는 않지만 사용자가 모바일 네트워크 시스템을 사용하여 상호 작용하는 경우 특히 여기 브라질에서 경험이 짜증날 수 있습니다.

해결책

Vue와 Quasar에 Loading 구성 요소가 있다는 것을 알고 있으며 정말 마음에 들지만 번들을 다운로드하고 로드한 후에만 사용할 수 있습니다. Vue, Quasar 및 모든 코드가 로드되고 구문 분석되기 전에 내 사용자가 일부 애니메이션을 보기를 원합니다. 이 같은:



그리고 Vue, React 또는 사용하는 다른 큰 프레임워크에서 작동하며 다음 규칙을 따르기만 하면 됩니다.

이것의 이면에 있는 마법은 코드가 자바스크립트나 큰 로켓 과학을 사용하지 않는다는 것입니다. <div id="app"></div> 위치를 사용하여 로딩 바를 실행하고 Vue가 로딩을 마치고 콘텐츠를 마운트하면 로딩이 Vue HTML 노드로 대체됩니다. 그렇게 쉽게!

사용자가 자바스크립트를 비활성화한 경우 작동해야 함을 기억하십시오. Okey는 Vue를 표시하지 않지만 사용자에게 활성화해야 한다고 알려주고 <noscript></noscript> 태그에 무언가를 표시합니다.

1. CSS 코드 및 애니메이션

나는 여기서 정직할 것이다. 나는 이 문제에 대한 참조가 아닙니다. Javascript를 사용하지 않는 로딩 바 진행 상황을 찾기 위해 Google과 stackoverflow를 사용했습니다. 많은 것을 찾았지만 내가 기대한 것은 없었기 때문에 그 중 일부를 혼합했고 결과는 다음과 같은 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. 작동 방식:

글쎄요, 브라우저가 필요한 모든 자바스크립트와 CSS를 로드하자마자 로드를 해당 App.vue로 대체하는 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 */);

무언가를 배우는 가장 좋은 방법은 작동하는 것을 보는 것입니다. 그래서, 잡아:

각주:

이것은 나의 첫 번째 기사이므로 친절하게 대해주십시오.

개선할 수 있는 부분이 있으면 댓글로 알려주세요.

이 기사가 마음에 드셨다면 댓글로 저에게 동기를 부여해 주세요.

모두 즐거운 한 주 되세요!