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

【问题标题】：Run/Hide spinner loading when fetching data from database从数据库中获取数据时运行/隐藏微调器加载
【发布时间】：2022-02-22 22:17:49
【问题描述】：

我正在从大型数据库中获取数据，第一次查询大约需要 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 按钮时，该按钮转换为微调器，即使数据已完全收集，仍会加载。

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

有什么提示吗？

【问题讨论】：

你又把微调器藏在哪里了？在 tagsService 行之后，只需执行 await JSRuntime.InvokeVoidAsync("myMap.spinnerHide"); 并创建一个相应的 JS 方法来执行此操作（即将其 .display 设置为“none”）

标签： javascript html css blazor spinner

【解决方案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");
}

【讨论】：