diff --git a/Blazor3State/Pages/FetchData.razor b/Blazor3State/Pages/FetchData.razor
index 3a76741..2cc6efe 100644
--- a/Blazor3State/Pages/FetchData.razor
+++ b/Blazor3State/Pages/FetchData.razor
@@ -9,23 +9,21 @@
 
 <button class="btn btn-primary" @onclick="LoadImage">New Image</button>
 <div class="image-container">
-    @if (state == LoadingContainerState.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)
-    {
-        <img src="https://loremflickr.com/200/300" alt="Alternate text" />
-    }
-    else if (state == LoadingContainerState.Error)
-    {
-        <p><em>An error has occurred. Click new image to try again !</em></p>
-    }
+    <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();
-    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;