From e2a769ace21a5517511afe269b49fdd5f176d739 Mon Sep 17 00:00:00 2001
From: Mladen Macanovic <mladen.macanovic@gmail.com>
Date: Fri, 30 Apr 2021 11:03:42 +0200
Subject: [PATCH] Add loading indicator and empty template to Datagrid

---
 .../Components/AbpExtensibleDataGrid.razor    | 14 +++++
 .../Components/RadarSpinner.razor             | 27 ++++++++
 .../wwwroot/libs/abp/css/theme.css            | 62 +++++++++++++++++++
 3 files changed, 103 insertions(+)
 create mode 100644 framework/src/Volo.Abp.BlazoriseUI/Components/RadarSpinner.razor

diff --git a/framework/src/Volo.Abp.BlazoriseUI/Components/AbpExtensibleDataGrid.razor b/framework/src/Volo.Abp.BlazoriseUI/Components/AbpExtensibleDataGrid.razor
index e0b867492e..459e47f442 100644
--- a/framework/src/Volo.Abp.BlazoriseUI/Components/AbpExtensibleDataGrid.razor
+++ b/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)
         {
diff --git a/framework/src/Volo.Abp.BlazoriseUI/Components/RadarSpinner.razor b/framework/src/Volo.Abp.BlazoriseUI/Components/RadarSpinner.razor
new file mode 100644
index 0000000000..0fd98cb98f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/wwwroot/libs/abp/css/theme.css b/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/wwwroot/libs/abp/css/theme.css
index ac9aabb57f..6aee7a5ba7 100644
--- a/modules/basic-theme/src/Volo.Abp.AspNetCore.Components.Web.BasicTheme/wwwroot/libs/abp/css/theme.css
+++ b/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);
+    }
+}
+
+