Отображение экрана загрузки во время ожидания получения данных

Question

Как отобразить загрузчик при загрузке страницы и скрыть его при загрузке?

Я создал некоторый код внутри моих html и css, но, к сожалению, это не похоже на мои ожидания.Я имею в виду, когда страница уже загружена, загрузчик все еще появляется.

view:

Пока что здесь мой dashboard.component.html

<style type="text/css">
  .text-xxl {
    font-size: 90px;
  }
</style>
<div class="row">
<div eds-tile class="xl-4">
  <eds-tile-title>User on Shift</eds-tile-title>
  <div class="loading large"></div>
<table class="table">
  <thead>
     <tr>
        <th *ngFor="let col of tablePresetColumns">
           {{col.content}}
        </th>
        <th></th>
        <th></th>
     </tr>
  </thead>
  <tbody>
     <tr *ngFor="let row of tablePresetData ">
        <td> {{row[0].content}}</td>
        <td *ngFor="let cell of row"> 
           <span class ="dot" [ngClass]="{
              'dot-yellow' : cell.content == 'Busy',
              'dot-green' : cell.content == 'Idle',
              'dot-red' : cell.content == 'Overload'}">
           </span>
        </td>
     </tr>
  </tbody>
 </table>
 </div>
<div class="xl-8">
<div class="row">
  <div eds-tile class="xl-6" style="height: 200px">
     <eds-tile-title>Number of User on Shift</eds-tile-title>
     <div class="kpi">
        <div class="loading large"></div>
        <div class="item" *ngFor="let item of apiData">
           <span class="text-xxl">{{item.total}}</span>
           <span class="text-lg color-gray"> Persons</span>
        </div>
     </div>
  </div>
  <div class="row">
     <div eds-tile class="xl-7" style="height: 500px">
        <eds-tile-title>User on Shift Indicator</eds-tile-title>
        <div class="loading large"></div>
        <div id="container" style="height: 100%"></div>
     </div>
  </div>
 </div>
</div>

dashboard.component.css

.loading {
  height: 32px;
  width: 32px;
  font-size: 32px;
  position: relative;
}
.loading::after {
  content: "\e930";
  font-family: "Ericsson Icons" !important;
  animation: rotateAnimation 2s infinite ease-in-out;
  position: absolute;
}
.loading.small {
  font-size: 16px;
  height: 16px;
  width: 16px;
}
.loading.large {
  font-size: 64px;
  height: 66px;
  width: 64px;
}
.loading.btn {
  font-size: 16px;
  height: 30px;
  width: 100px;
}
.loading.btn::after {
  left: calc(50% - 8px);
  top: calc(50% - 8px);
}
@keyframes rotateAnimation {
  0% {
   transform: rotate(0);
  }
  25% {
   transform: rotate(300deg);
  }
  100% {
   transform: rotate(0);
  }
}

Спасибо

Answer 1

Используйте один флаг, чтобы показать, как скрыть ваш HTML-код в файле TS public dataAvailable:boolean=false;

, в то время как вызов API make устанавливает для этого флага значение true this.dataAvailable = true

и когда ответ API завершенв ответном ответе было получено значение false this.dataAvailable = false

и ваш HTML с условием * ngIf, чтобы показывать html скрытия и показывать загрузчик, в то время как флаг установлен в true, после этого показывать ваш HTML

Answer 2

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

<eds-tile-title>Number of User on Shift</eds-tile-title>
 <div class="kpi">
    <div *ngIf='!apiData' class="loading large"></div>
    <div class="item" *ngFor="let item of apiData">
       <span class="text-xxl">{{item.total}}</span>
       <span class="text-lg color-gray"> Persons</span>
    </div>
 </div>

<div eds-tile class="xl-7" style="height: 500px">
    <eds-tile-title>User on Shift Indicator</eds-tile-title>
    <div *ngIf='!apiData' class="loading large"></div>
    <div id="container" style="height: 100%"></div>
 </div>

PS: Предполагается, что вы используете Angular.