Run/Hide spinner loading when fetching data from database

Question

I'm getting data from big database which the first query takes around 10-12 seconds to get my data using grid view - I'm using Blazer with entity.

I would like to display the spinner when I'm loading the data and once all the data get fetched the spinner should be stopped or hided. No mater the location of the spinner.

This is my CSS:

.loader {
    display: none;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
  }
  
  .loading {
    border: 2px solid #ccc;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border-top-color: #1ecd97;
    border-left-color: #1ecd97;
    animation: spin 1s infinite ease-in;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
  
    100% {
      transform: rotate(360deg);
    }
  }

this is my js function:

spinner: function(){
        document.getElementsByClassName("loader")[0].style.display = "block";

HTML :

<div class="col-auto offset-5">


        <button class="btn btn-info " @onclick="GetTags" style="width: 175px;">Get Tags</button>
   <div class="loader">
  <div class="loading">
  </div>
</div>
    </div>

and this is my blazor method that gets the data from the database and call the js method 'spinner'

public async Task GetTags()
    {
        await JSRuntime.InvokeVoidAsync("myMap.spinner");
        AllTags = await Task.Run(() => tagsService.Map(InputRadius, SelectedTimeDate, Long, Lat));
        

    }

The current result is when I'm clicking on the GetTags button the button converted to spinner and still loading even if the data fully gathered.

I do believe that I'm doing something wrong but i don't know what it is.

Any hint ?

Answer 1

You will first need to update your JavaScript to contain a hide and a show function, or include a parameter to indicate which.

I also suggest using querySelector instead of getElementsByClassName, since you want to work with the only or first .loader element.

spinner: {
    show: function() {
        document.querySelector(".loader").style.display = "block";
    },
    hide: function() {
        document.querySelector(".loader").style.display = "none";
    }
}

Then in your Blazor code:

public async Task GetTags()
{
    await JSRuntime.InvokeVoidAsync("myMap.spinner.show");
    //Your code that takes time to execute
    await JSRuntime.InvokeVoidAsync("myMap.spinner.hide");
}