Hide and Replace Div after a certain time

Issue

I am displaying a table in angular on the components html component. I noticed that the pull of the data and filtering the data takes some time and the table doesn't load right away. so I decided to add a loading spinner image however I want the loading spinner to disappear after about 5 secs and for the table to appear. I wrote some code to have the spinner disappear after 5 secs however I am running into the trouble of the loading spinner div still being on the page and having to scroll down to see the table in the overflow box. is there a way to make the loading spinner div complete disappear or maybe even swap the table div for the spinner div?

component.html

<!-- Displaying Data from NCEI Data Pull -->
<h1>Preview Data</h1>
<div id="scrollable-area">
    
    <!-- Display Loading Circle -->
    <div class="loading hide">
        <div class="circle"></div>
    </div>

    <table class="table">
    
        

        <!-- Display Headers -->
        <th *ngFor = "let row of headers">
            {{row}}
        </th>
    
        <!-- Display Data -->
        <tr *ngFor = "let row of dataObj">
            <td *ngFor = "let column of row" class="rows">{{ column }}</td>
        </tr>
    </table>
</div>

component.css

h1{
      text-align: center;
      color:rgb(0, 0, 0);
      padding: 15px 32px;
      text-decoration: none;
      margin: 4px 2px;
      
}

table{
    font-family: 'Trebuchet MS', Arial, Arial, Helvetica, sans-serif;
    border-collapse: separate;
    width: 100%;
    border-radius:6px;
}


td{
  padding: 8px;
  align-content: center;
  text-align: center;
  background-color: white;
} 
th{
  padding: 8px;
  align-content: center;
  text-align: center;
  background-color: white;
  color: black;
  position: sticky;
  top: 0;
}

#scrollable-area {
  margin: auto;
  width: 80%;
  height: 400px;
  border: 2px solid #ccc;
  overflow-y: scroll;
  border-radius: 20px;
  border-left:solid black 9px;
  border-top:solid black 9px;
  border-bottom: solid black 1px;
  border-right: solid black 1px;
  background-color: rgb(172, 169, 169);
}
#scrollable-area::-webkit-scrollbar {
  width: 9px;               /* width of the entire scrollbar */
  height: 9px;
}
#scrollable-area::-webkit-scrollbar-corner{
  background: black;
  border-bottom-right-radius: 20px;
}
#scrollable-area::-webkit-scrollbar-track {
  background: black;
  border-radius: 50px;
  border: double black 1px;
}

#scrollable-area::-webkit-scrollbar-thumb {
  background-color: rgb(0, 0, 0);
  border-radius: 20px;
  border: 3px solid rgb(255, 255, 255);
  
}

.loading{
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.circle{
  content: "";
  width: 20px;
  height: 20px;
  border: 5px solid #dddddd;
  border-top-color: rgb(88, 118, 86);
  border-radius: 50%;
  animation: loading 1.5s ease infinite;
}

@keyframes loading{
  to {
    transform: rotate(1turn)}
}

.hide {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 5s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 5s;
  position: relative;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}
@keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: -9999px; 
  }
}

any advice would be appreciated.

Three screenshots of progress [1]: https://i.stack.imgur.com/0iqeN.png [2]: https://i.stack.imgur.com/QPgm1.png [3]: https://i.stack.imgur.com/0u8gB.png

Solution

You can use the *ngIf directive to display and hide the loader on the basis of your data received or not. I suppose you get your response in dataObj? You can either create a flag isLoading or just use your dataObj to check if data has arrived or not.

    <div *ngIf="!dataObj">
        <div class="circle"></div>
    </div>
    <table class="table" *ngIf="dataObj">   
        <!-- Display Headers -->
        <th *ngFor = "let row of headers">
            {{row}}
        </th> 
        <!-- Display Data -->
        <tr *ngFor = "let row of dataObj">
            <td *ngFor = "let column of row" class="rows">{{ column }}</td>
        </tr>
    </table>

Alternatively, as I mentioned that you can create a flag and use that to determine when you want to show the loader or not. So with a flag, it would look something like this. Firstly let's create the flag in your .ts component:

//Either initialize it with true or set its value to true when you begin the get call
isLoading: boolean = true;

//Wherever you getting the response just set isLoading to false
this.isLoading = false

and your HTML would look like this

    <div *ngIf="isLoading">
        <div class="circle"></div>
    </div>
    <table class="table" *ngIf="!isLoading">   
        <!-- Display Headers -->
        <th *ngFor = "let row of headers">
            {{row}}
        </th> 
        <!-- Display Data -->
        <tr *ngFor = "let row of dataObj">
            <td *ngFor = "let column of row" class="rows">{{ column }}</td>
        </tr>
    </table>

Answered By - HassanMoin