在加载子组件时，在父级中显示加载指示器。子组件是一张图片，我想显示图片的加载，直到图片完全加载

Question

我正在开发Blazor Wasm应用程序。

我的图像很大，加载缓慢时会导致不良的UI体验。我只想在页面中的所有图像都完全加载后才显示页面。

在加载子组件时，在父项中显示加载指示器。子组件是一个图像，我想显示加载，直到图像完全加载

父组件（index.razor）

@page "/"
@inject HttpClient Http
@inject IJSRuntime JSRuntime

@if (isLoaded == false)
{
    <div class="Animate fa-3x" style="position: fixed;z-index: 1031;top: 50%;left: 50%;transform: translate(-50%, -50%);"><i class="fas fa-sync fa-spin"></i></div>
}
else
{
    <div id="wrapper" class="Animate">
        <header>
            @* use square images to prevent reflow of content *@
            <Image styleclass="header_image" src="img/mypic.jpg" width="150" height="150"/>
            
        </header>

        <br>

        <main>
            @foreach (var portfolio_data_obj in portfolio_data_list)
            {
            <section>
                <h5 class="section-title">&nbsp;&nbsp;<i class="@portfolio_data_obj.section_title_icon_class"></i> @portfolio_data_obj.section_title&nbsp;&nbsp;</h5>

                @{
                    // Here the initialization happens outside of the loop
                    int i = 1;
                } 
                @foreach (var portfolio_data_boxes_list_obj in portfolio_data_obj.boxes_list)
                {
                    <div class="box">
                        @if(@portfolio_data_boxes_list_obj.image_location != null)
                        {
                            <Image styleclass="box_image" src="@portfolio_data_boxes_list_obj.image_location" width="100" height="100"/>
                            <br>
                        }
                        @if(@portfolio_data_boxes_list_obj.line1_html != null)
                        {
                            <b>@portfolio_data_boxes_list_obj.line1_html</b>
                            <br>
                        }
                        @if(@portfolio_data_boxes_list_obj.line2_html != null)
                        {
                            @portfolio_data_boxes_list_obj.line2_html
                            <br>
                        }
                        @if(@portfolio_data_boxes_list_obj.line3_html != null)
                        {
                            @portfolio_data_boxes_list_obj.line3_html
                            <br>
                        }
                        @if(@portfolio_data_boxes_list_obj.line4_html != null)
                        {
                            @portfolio_data_boxes_list_obj.line4_html
                            <br>
                        }
                    </div>
                    i++;
                }
            </section>
            }
        </main>
    </div>
}

@code {
    bool isLoaded;

    List<portfolio_data> portfolio_data_list = new List<portfolio_data>();

    public class portfolio_data
    {
        public string section_title { get; set; }
        public string section_title_icon_class { get; set; }
        public List<boxes> boxes_list { get; set; }
    }

    public class boxes
    {
        public string image_location { get; set; }
        public Boolean is_large_image { get; set; }
        public string line1_html { get; set; }
        public string line2_html { get; set; }
        public string line3_html { get; set; }
        public string line4_html { get; set; }
        public Boolean is_visible { get; set; }
    }

    protected override async Task OnInitializedAsync()
    {
        portfolio_data_list = await Http.GetFromJsonAsync<List<portfolio_data>>("data.json");
        isLoaded = true;
    }
}

子组件（Image.razor）

<img class="@styleclass" src="@src" width="@width" height="@height">
    
    @code
    {
        [Parameter]
        public string styleclass {get; set;}
        [Parameter]
        public string src {get; set;}
        [Parameter]
        public string width {get; set;}
        [Parameter]
        public string height {get; set;}
    }