Add loading indicator and empty template to Datagrid

framework/src/Volo.Abp.BlazoriseUI/Components/AbpExtensibleDataGrid.razor

@@ -10,6 +10,20 @@
           ShowPager="@ShowPager"
           CurrentPage="@CurrentPage"
           PageSize="@PageSize">
+    <LoadingTemplate>
+        <Row Class="w-100 align-items-center" Style="height: 150px;">
+            <Column>
+               <RadarSpinner />
+            </Column>
+        </Row>
+    </LoadingTemplate>
+    <EmptyTemplate>
+        <Row Class="w-100 align-items-center" Style="height: 150px;">
+            <Column>
+                <Heading Size="HeadingSize.Is4" Alignment="TextAlignment.Center">No data available</Heading>
+            </Column>
+        </Row>
+    </EmptyTemplate>
     <DataGridColumns>
         @if (Columns != null)
         {

framework/src/Volo.Abp.BlazoriseUI/Components/RadarSpinner.razor

@@ -0,0 +1,27 @@
+<div class="d-flex justify-content-center">
+    <div class="radar-spinner">
+        <div class="circle">
+            <div class="circle-inner-container">
+                <div class="circle-inner"></div>
+            </div>
+        </div>
+
+        <div class="circle">
+            <div class="circle-inner-container">
+                <div class="circle-inner"></div>
+            </div>
+        </div>
+
+        <div class="circle">
+            <div class="circle-inner-container">
+                <div class="circle-inner"></div>
+            </div>
+        </div>
+
+        <div class="circle">
+            <div class="circle-inner-container">
+                <div class="circle-inner"></div>
+            </div>
+        </div>
+    </div>
+</div>

modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/wwwroot/libs/abp/css/theme.css

@@ -108,3 +108,65 @@ div.dataTables_wrapper div.dataTables_length label {
     margin-right: .5rem;
 }
 
+.radar-spinner, .radar-spinner * {
+    box-sizing: border-box;
+}
+
+.radar-spinner {
+    height: 60px;
+    width: 60px;
+    position: relative;
+}
+
+    .radar-spinner .circle {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        top: 0;
+        left: 0;
+        animation: radar-spinner-animation 2s infinite;
+    }
+
+        .radar-spinner .circle:nth-child(1) {
+            padding: calc(60px * 5 * 2 * 0 / 110);
+            animation-delay: 300ms;
+        }
+
+        .radar-spinner .circle:nth-child(2) {
+            padding: calc(60px * 5 * 2 * 1 / 110);
+            animation-delay: 300ms;
+        }
+
+        .radar-spinner .circle:nth-child(3) {
+            padding: calc(60px * 5 * 2 * 2 / 110);
+            animation-delay: 300ms;
+        }
+
+        .radar-spinner .circle:nth-child(4) {
+            padding: calc(60px * 5 * 2 * 3 / 110);
+            animation-delay: 0ms;
+        }
+
+    .radar-spinner .circle-inner, .radar-spinner .circle-inner-container {
+        height: 100%;
+        width: 100%;
+        border-radius: 50%;
+        border: calc(60px * 5 / 110) solid transparent;
+    }
+
+    .radar-spinner .circle-inner {
+        border-left-color: var(--secondary, #ff1d5e);
+        border-right-color: var(--secondary, #ff1d5e);
+    }
+
+@keyframes radar-spinner-animation {
+    50% {
+        transform: rotate(180deg);
+    }
+
+    100% {
+        transform: rotate(0deg);
+    }
+}
+
+