Updated Loading animation for metrics

DemocraciaEnRed · Sep 14, 2023 · aa8fd36 · aa8fd36
1 parent 1ac1f00
commit aa8fd36
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 5 deletions.
diff --git a/components/admin-metric/metricsByAuthor.js b/components/admin-metric/metricsByAuthor.js
@@ -15,6 +15,24 @@ const LoadingAnimation = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  background: #eaeaea;
+  padding: 20px 5px;
+  margin-bottom: 5px;
+  // animate text loading to fade in and out
+  p {
+    animation: fadeInOut 1.5s ease-in-out infinite;
+  }
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+    45% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 `
 
 const UserWrapper = styled.div`
@@ -240,7 +258,7 @@ class MetricsByAuthor extends Component {
         </FilterRow>
         { isLoading && (
           <LoadingAnimation>
-            Cargando...
+            <p>Cargando...</p>
           </LoadingAnimation>
         )}
         { !isLoading && (<div>

diff --git a/components/admin-metric/metricsInteractions.js b/components/admin-metric/metricsInteractions.js
@@ -15,6 +15,24 @@ const LoadingAnimation = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  background: #eaeaea;
+  padding: 20px 5px;
+  margin-bottom: 5px;
+  // animate text loading to fade in and out
+  p {
+    animation: fadeInOut 1.5s ease-in-out infinite;
+  }
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+    45% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 `
 
 const UserWrapper = styled.div`
@@ -367,7 +385,7 @@ class MetricsInteractions extends Component {
         </FilterRow>
         { isLoading && (
           <LoadingAnimation>
-            Cargando...
+            <p>Cargando...</p>
           </LoadingAnimation>
         )}
         { !isLoading && (<div>

diff --git a/components/admin-metric/metricsTags.js b/components/admin-metric/metricsTags.js
@@ -17,6 +17,24 @@ const LoadingAnimation = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  background: #eaeaea;
+  padding: 20px 5px;
+  margin-bottom: 5px;
+  // animate text loading to fade in and out
+  p {
+    animation: fadeInOut 1.5s ease-in-out infinite;
+  }
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+    45% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 `
 
 const UserWrapper = styled.div`
@@ -404,7 +422,7 @@ class MetricsTags extends Component {
         </FilterRow> */}
         { isLoading && (
           <LoadingAnimation>
-            Cargando...
+            <p>Cargando...</p>
           </LoadingAnimation>
         )}
         { !isLoading && (<div>

diff --git a/components/admin-metric/metricsUsers.js b/components/admin-metric/metricsUsers.js
@@ -15,6 +15,24 @@ const LoadingAnimation = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  background: #eaeaea;
+  padding: 20px 5px;
+  margin-bottom: 5px;
+  // animate text loading to fade in and out
+  p {
+    animation: fadeInOut 1.5s ease-in-out infinite;
+  }
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+    45% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 `
 
 const UserWrapper = styled.div`
@@ -259,7 +277,7 @@ class MetricsUsers extends Component {
         </FilterRow>
         { isLoading && (
           <LoadingAnimation>
-            Cargando...
+            <p>Cargando...</p>
           </LoadingAnimation>
         )}
         { !isLoading && (

diff --git a/components/admin-metric/metricsUsersByRole.js b/components/admin-metric/metricsUsersByRole.js
@@ -15,6 +15,24 @@ const LoadingAnimation = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
+  background: #eaeaea;
+  padding: 20px 5px;
+  margin-bottom: 5px;
+  // animate text loading to fade in and out
+  p {
+    animation: fadeInOut 1.5s ease-in-out infinite;
+  }
+  @keyframes fadeInOut {
+    0% {
+      opacity: 0;
+    }
+    45% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
 `
 
 const UserWrapper = styled.div`
@@ -235,7 +253,7 @@ class MetricsUsersByRole extends Component {
         </TitleMetric>
         { isLoading && (
           <LoadingAnimation>
-            Cargando...
+            <p>Cargando...</p>
           </LoadingAnimation>
         )}
         { !isLoading && (<div>