Implemented file view loading animation

Moonlight/Shared/Components/FileManagerPartials/FileView.razor

@@ -35,6 +35,7 @@
             <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer" style="width: 100%;">
                 <tbody class="fw-semibold text-gray-600">
                 <LazyLoader Load="Load">
+                    <ContentBlock @ref="ContentBlock" AllowContentOverride="true">
                         <tr class="even">
                             <td class="w-10px">
                             </td>
@@ -117,6 +118,7 @@
                                 </td>
                             </tr>
                         }
+                    </ContentBlock>
                 </LazyLoader>
                 </tbody>
             </table>
@@ -138,6 +140,7 @@
 
 @code
 {
+
     [Parameter]
     public FileAccess Access { get; set; }
 
@@ -169,15 +172,19 @@
     private Dictionary<FileData, bool> ToggleStatusCache = new();
     private bool AllToggled = false;
 
+    private ContentBlock ContentBlock;
+
     public async Task Refresh()
     {
+        ContentBlock?.SetBlocking(true);
+
         var list = new List<FileData>();
 
         foreach (var fileData in await Access.Ls())
         {
             if (Filter != null)
             {
-                if(Filter.Invoke(fileData))
+                if (Filter.Invoke(fileData))
                     list.Add(fileData);
             }
             else
@@ -196,6 +203,8 @@
 
         await InvokeAsync(StateHasChanged);
         OnSelectionChanged?.Invoke();
+
+        ContentBlock?.SetBlocking(false);
     }
 
     private async Task Load(LazyLoader arg)
@@ -273,4 +282,4 @@
 
         return Task.CompletedTask;
     }
-}
+    } 

Moonlight/Shared/Components/Partials/ContentBlock.razor

@@ -0,0 +1,52 @@
+@if (AllowContentOverride)
+{
+    if (IsBlocking)
+    {
+        <div class="overlay overlay-block">
+            <div class="overlay-wrapper p-5">
+                @(ChildContent)
+            </div>
+            <div class="overlay-layer">
+                <div class="spinner-border text-primary" role="status">
+                </div>
+            </div>
+        </div>
+    }
+    else
+    {
+        @ChildContent
+    }
+}
+else
+{
+    <div class="@(IsBlocking ? "overlay overlay-block" : "")">
+        <div class="@(IsBlocking ? "overlay-wrapper p-5" : "")">
+            @(ChildContent)
+        </div>
+        @if (IsBlocking)
+        {
+            <div class="overlay-layer">
+                <div class="spinner-border text-primary" role="status">
+                </div>
+            </div>
+        }
+    </div>
+}
+
+@code
+{
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    [Parameter]
+    public bool AllowContentOverride { get; set; } = false;
+
+    private bool IsBlocking = false;
+
+    public async Task SetBlocking(bool b)
+    {
+        IsBlocking = b;
+
+        await InvokeAsync(StateHasChanged);
+    }
+}