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 ?
