【ASP.NET Core MVC】部分ビューを使って処理中にスピナーを表示する

using Microsoft.AspNetCore.Mvc;
using System.ComponentModel.DataAnnotations;

namespace SampleApplication.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index(string searchString = "")
        {
            // ユーザーのリストを作成（本来であればDB等からデータを取得する）
            var userList = new List<UserModel>
            {
                new UserModel { Name = "山田 太郎", Age = 30 },
                new UserModel { Name = "田中 次郎", Age = 20 },
                new UserModel { Name = "山田 花子", Age = 10 },
            };
            
            // 検索文字列が指定されている場合は条件に一致するユーザーのみを取得する
            if (!string.IsNullOrEmpty(searchString))
            {
                // 名前に検索文字列を含むユーザーを取得
                userList = userList.Where(x => x.Name.Contains(searchString)).ToList();

                // 確認のためわざと3秒間停止させる
                Thread.Sleep(3000);
            }

            return View(userList);
        }
    }

    public class UserModel
    {
        [Display(Name = "名前")]
        public string Name { get; set; } = "";

        [Display(Name = "年齢")]
        public int Age { get; set; }
    }
}

@model IEnumerable<SampleApplication.Controllers.UserModel>

<h1>ユーザーリスト</h1>

@*検索エリア*@
<form asp-action="Index">
    <div class="form-group">
        <input type="text" name="searchString" />
        <input type="submit" value="検索" class="btn btn-primary" onclick="displaySpinner()" />
        <partial name="_LoadingPartial" />
    </div>
</form>

@*データ表示エリア*@
@{
    if (Model != null && Model?.Count() > 0)
    {
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Age)
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Age)
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    }
    else
    {
        <p>データがありません。</p>
    }
}

function displaySpinner() {
    document.querySelector("#loading").style.display = "inline-block";
}

@*スピナーの表示設定*@
<span class="spinner-border" style="display: none; vertical-align: middle; margin-left: 10px" role="status" id="loading"></span>
<span class="visually-hidden">Loading...</span>