Use razer component for states
This commit is contained in:
@ -9,23 +9,21 @@
|
||||
|
||||
<button class="btn btn-primary" @onclick="LoadImage">New Image</button>
|
||||
<div class="image-container">
|
||||
@if (state == LoadingContainerState.Loading)
|
||||
{
|
||||
<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>
|
||||
}
|
||||
else if (state == LoadingContainerState.Loaded)
|
||||
{
|
||||
</Loading>
|
||||
<Loaded>
|
||||
<img src="https://loremflickr.com/200/300" alt="Alternate text" />
|
||||
}
|
||||
else if (state == LoadingContainerState.Error)
|
||||
{
|
||||
</Loaded>
|
||||
<ErrorContent>
|
||||
<p><em>An error has occurred. Click new image to try again !</em></p>
|
||||
}
|
||||
</ErrorContent>
|
||||
</LoadingContainer>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
Random random = new Random();
|
||||
public enum LoadingContainerState { Loading, Loaded, Error }
|
||||
LoadingContainerState state;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
@ -36,7 +34,7 @@
|
||||
async Task LoadImage()
|
||||
{
|
||||
state = LoadingContainerState.Loading;
|
||||
await Task.Delay(1000);
|
||||
await Task.Delay(2000);
|
||||
if (random.Next(3) == 2)
|
||||
{
|
||||
state = LoadingContainerState.Error;
|
||||
|
||||
Reference in New Issue
Block a user