[Udemy Vue 완벽가이드 Section12] 160. “로딩 중..” 메시지 표시하기

새로고침이나 데이터를 로드할 때 Firebase와 나의 인터넷이 빠르기 때문에 대부분은 상당히 빠르게 로드가 끝난다.

만약 속도가 느린 서버와 통신하거나, Vue 애플리케이션 유저의 인터넷 연결이 느린 경우, 데이터를 로드하는데 시간이 걸릴 수 있다.

이 경우 로딩 아이콘이나 로딩 메시지를 띄워보자.

 

UserExperiences.vue 파일에서 데이터를 로드 및 표시하게되는데, 데이터가 완전히 로드된 후 이 데이터 목록을 표시하고자한다.

데이터 로드 중에는 로딩메시지가 표시되도록 해보자.

 

새로운 data 프로퍼티를 추가해서 쉽게 실행할 수 있다. ex: isLoading

초기에는 false로 설정해보자. 그리고 loadExperiences 메서드가 트리거될때마다 fetch가 시작되기 전에 this.isLoading = true;로 설정해보자.

이후 데이터 로드가 모두 끝나면 다시 this.isLoading = false;로 설정하자.

loadExperiences() {
    this.isLoading = true; // fetch시작 전 true로 설정.
      fetch(
        'https://vue-http-***.firebaseio.com/surveys.json'
      )
        .then((response) => {
          if (response.ok) {
            return response.json();
          }
        })
        .then((data) => {
          this.isLoading = false; //여기에 this.isLoading을 false로 설정.
          const results = [];
          for (const id in data) {
            results.push({
              id: id,
              name: data[id].name,
              rating: data[id].rating,
            });
          }
          this.results = results;
        });
       //this.isLoading = false; // 이 지점에 추가x.
    },

this.isLoading = false 코드를 fetch함수 이후에 추가해서는 안된다.

JavaScript는 fetch가 끝날 때까지 기다리지 않는다. 따라서 fetch함수 실행 후, 바로 다음 줄인 this.isLoading = false가 실행된다. 따라서 로딩메시지가 보이지 않는다.

then 함수에 있는 코드만 fetch 실행완료 이후에 실행된다. 그래서 isLoading값 변경은 then 안에 추가해야한다.

 

 

이제 isLoading 프로퍼티를 사용할 수 있는데, v-if를 통해서 데이터가 로드 중이 아니라면 데이터를 표시하고, 로드 중이라면 로딩 아이콘이나 텍스트를 표시하자.

isLoading값이 true라면 'Loading...' 텍스트가 표시되도록 하자.

<p v-if="isLoading">Loading...</p>
<ul v-else>
  <survey-result
    v-for="result in results"
    :key="result.id"
    :name="result.name"
    :rating="result.rating"
  ></survey-result>
</ul>

 

새로고침해보자.

제대로 잘 작동한다. 데이터가 도착하기까지 기다리는 동안 로딩 아이콘 또는 로딩 메시지를 띄울 수 있다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.