Run/Hide 从数据库中获取数据时加载微调器

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

Run/Hide 从数据库中获取数据时加载微调器

Run/Hide spinner loading when fetching data from database

html

javascript

css

spinner

blazor