46 lines
1.2 KiB
Plaintext
46 lines
1.2 KiB
Plaintext
@page "/fetchdata"
|
|
|
|
@using Blazor3State.Data
|
|
@inject WeatherForecastService ForecastService
|
|
|
|
<h1>Showing states in blazor</h1>
|
|
|
|
<p>This component demonstrates fetching data from a service.</p>
|
|
|
|
<button class="btn btn-primary" @onclick="LoadImage">New Image</button>
|
|
<div class="image-container">
|
|
<LoadingContainer State="@state">
|
|
<Loading>
|
|
<div class="lds-default"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
|
</Loading>
|
|
<Loaded>
|
|
<img src="https://loremflickr.com/200/300" alt="Alternate text" />
|
|
</Loaded>
|
|
<ErrorContent>
|
|
<p><em>An error has occurred. Click new image to try again !</em></p>
|
|
</ErrorContent>
|
|
</LoadingContainer>
|
|
</div>
|
|
|
|
@code {
|
|
Random random = new Random();
|
|
LoadingContainerState state;
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
await LoadImage();
|
|
}
|
|
|
|
async Task LoadImage()
|
|
{
|
|
state = LoadingContainerState.Loading;
|
|
await Task.Delay(2000);
|
|
if (random.Next(3) == 2)
|
|
{
|
|
state = LoadingContainerState.Error;
|
|
}
|
|
else state = LoadingContainerState.Loaded;
|
|
|
|
}
|
|
}
|