Fade out chart data up-to-date status

openclimatefix · Apr 15, 2024 · e9c25bb · e9c25bb
1 parent 5476b35
commit e9c25bb
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx b/apps/nowcasting-app/components/charts/DataLoadingChartStatus.tsx
@@ -76,7 +76,7 @@ const EndpointStatusList = <K extends NationalEndpointStates | SitesEndpointStat
     <div className="absolute -top-4 right-4 flex items-center h-9 z-40">
       <div
         className={`chart-data-loading-message flex flex-row relative h-6 cursor-default justify-between items-center rounded-sm bg-mapbox-black  ${
-          isLoadingData ? "pr-2 pl-1.5" : "bg-mapbox-black-600 px-1.5"
+          isLoadingData ? "pr-2 pl-1.5" : "bg-mapbox-black-600 px-1.5 fade-out"
         }`}
       >
         {!!isLoadingData && <SpinnerTextInline className="mr-2" />}

diff --git a/apps/nowcasting-app/styles/globals.css b/apps/nowcasting-app/styles/globals.css
@@ -43,3 +43,17 @@
 .chart-data-loading-message:hover .chart-data-loading-endpoints {
   display: block;
 }
+
+.fade-out {
+  opacity: 1;
+  animation: fade-out 2s ease-in-out forwards;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}