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?
Primero deberá actualizar su JavaScript para que contenga una función para hide
y show
, o incluir un parameter
para indicar cuál.
También sugiero usar querySelector
en lugar de getElementsByClassName
, ya que desea trabajar con el único o el primer elemento .loader
.
spinner: { show: function() { document.querySelector(".loader").style.display = "block"; }, hide: function() { document.querySelector(".loader").style.display = "none"; } }
Luego, en su código Blazor:
public async Task GetTags() { await JSRuntime.InvokeVoidAsync("myMap.spinner.show"); //Your code that takes time to execute await JSRuntime.InvokeVoidAsync("myMap.spinner.hide"); }