Obtengo datos de una gran base de datos, cuya primera consulta tarda entre 10 y 12 segundos en obtener mis datos usando la vista de cuadrícula: estoy usando Blazer con entidad.

Me gustaría mostrar la rueda giratoria cuando estoy cargando los datos y una vez que se obtienen todos los datos, la rueda giratoria debe detenerse u ocultarse. No importa la ubicación de la ruleta.

Este es mi 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); } }

esta es mi función js:

 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>

y este es mi método blazor que obtiene los datos de la base de datos y llama al método js 'spinner'

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

El resultado actual es cuando hago clic en el botón Obtener etiquetas, el botón se convierte en un control giratorio y aún se carga incluso si los datos se recopilaron por completo.

Creo que estoy haciendo algo mal, pero no sé qué es.

¿Alguna pista?