从数据库获取数据时运行/隐藏旋转加载

Question

我从大型数据库获取数据，第一个查询大约需要10-12秒才能使用网格视图来获取数据--我使用的是实体Blazer。

我想在加载数据时显示旋转器，一旦所有数据都被获取，就应该停止或隐藏旋转器。不知道旋转器的位置。

这是我的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);
    }
  }

这是我的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>

这是我的blazor方法，它从数据库中获取数据，并调用js方法'spinner‘。

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

    }

当前的结果是，当我单击GetTags按钮时，按钮被转换为spinner，即使数据完全收集，仍然加载。

我确实认为我做错了什么，但我不知道这是什么。

有什么暗示吗？

Answer 1

您首先需要更新您的JavaScript以包含hide和show函数，或者包括一个parameter来指示哪个函数。

我还建议使用querySelector而不是getElementsByClassName，因为您希望使用唯一的或第一个.loader元素。

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

然后在你的Blazor代码中：

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