从数据库获取数据时运行/隐藏微调器加载

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 按钮时按钮转换的结果即使数据已完全收集，旋转器仍会加载。

我确实相信我做错了什么，但我不知道那是什么。

有什么提示吗？

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");
}