Updated loading indicator on ranking, line, scatter, and bar chart (#…

…4184) * Added spinner and "Loading" indicator to ranking, line, scatter, and bar chart * Lightened color of full-page & stat var explorer loading screen Screenshots ## Explore page ### Full page loading ![explore-full-page-load](https://github.com/datacommonsorg/website/assets/13766/7672174c-4eeb-4f54-a3f1-1d20c367eca6) ### Bar ![explore-bar-loading](https://github.com/datacommonsorg/website/assets/13766/9cfac87e-74f8-4f0a-a003-e0b10aed3e42) ![explore-bar-loaded](https://github.com/datacommonsorg/website/assets/13766/1bbda157-ff4b-4c85-9e59-30073c3f54a0) ### Line ![explore-line-loading](https://github.com/datacommonsorg/website/assets/13766/2ccdc889-098c-4040-ae74-1c787898f720) ![explore-line-loaded](https://github.com/datacommonsorg/website/assets/13766/174d96fe-03ee-4702-8c1b-fed9cf23c9d3) ### Ranking ![explore-ranking-loading](https://github.com/datacommonsorg/website/assets/13766/583569dd-f9eb-4373-a8d1-53ee348335dc) ![explore-ranking-loaded](https://github.com/datacommonsorg/website/assets/13766/6e800710-737e-4812-8d3d-4719cb7bb470) ### Scatter ![explore-scatter-loading](https://github.com/datacommonsorg/website/assets/13766/73f2359a-b9b8-47e3-ba3c-20bdc0a65780) ![explore-scatter-loaded](https://github.com/datacommonsorg/website/assets/13766/a1314cf5-394b-42d7-840a-b7f163722add) ## Visualization tool ### Loading ![viz-tool-loading](https://github.com/datacommonsorg/website/assets/13766/306ea305-cd38-4364-9803-a1126ff0f65f) ### Line ![viz-line-loading](https://github.com/datacommonsorg/website/assets/13766/c5d87711-cdf9-445a-a5bb-52336106c397) ![viz-line-loaded](https://github.com/datacommonsorg/website/assets/13766/9f237ac7-07e3-457b-91c5-89cd0a9523e0) ### Map / Ranking ![viz-map-loading](https://github.com/datacommonsorg/website/assets/13766/612d3d5d-8cd0-4b1d-894e-ce2b3174e73a) ![viz-map-loaded](https://github.com/datacommonsorg/website/assets/13766/7a407fb2-2113-48ad-a5a4-989132f3ffa2) ### Scatter ![viz-scatter-loading](https://github.com/datacommonsorg/website/assets/13766/9abb2e6b-8896-4886-9945-ced2e2d1d7ef) ![viz-scatter-loaded](https://github.com/datacommonsorg/website/assets/13766/443e98db-03ee-471a-8b8f-9f047b17ee48)
datacommonsorg · May 23, 2024 · 1313ca4 · 1313ca4
1 parent f7f7d63
commit 1313ca4
Show file tree

Hide file tree

Showing 20 changed files with 177 additions and 147 deletions.
diff --git a/static/css/base.scss b/static/css/base.scss
@@ -202,7 +202,7 @@ $headings-font-family: $font-family-sans-serif;
   background: $full-footer-bg;
   padding-top: 75px;
   /* Trick to get the footer to extend to the bottom of short pages */
-  box-shadow: 0 50vh 0 50vh var(--footer-bg);
+  box-shadow: 0 50vh 0 50vh var(--footer-background);
   .top-footer {
     padding-bottom: 30px;
   }
@@ -250,7 +250,7 @@ $headings-font-family: $font-family-sans-serif;
 
 #main-footer #sub-footer {
   align-items: space-between;
-  background: var(--footer-bg);
+  background: var(--footer-background);
   border-top: 1px solid $gray-300;
   display: flex;
   flex-direction: row;
@@ -328,7 +328,7 @@ $headings-font-family: $font-family-sans-serif;
   position: absolute;
   left: 0;
   top: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.02);
   z-index: 100;
   width: 100%;
   height: 100%;
@@ -374,7 +374,7 @@ $headings-font-family: $font-family-sans-serif;
   margin-top: 150px;
   margin-left: 20px;
   font-size: 20px;
-  color: white;
+  color: var(--gm-3-ref-neutral-neutral-40);
   opacity: 0; /* Initially hidden */
   animation: fadeIn 0.5s forwards 3s; /* Animation after 3s delay */
 }

diff --git a/static/css/base/_color.scss b/static/css/base/_color.scss
@@ -51,7 +51,8 @@ $dc-primary-color: #467bd5;
   // Following vars are overwritten in custom dc modes
   --dc-primary: #{$dc-primary-color};
   --link-color: #0b57d0;
-  --footer-bg: #f5f9fe;
+  --loading-background: #f8f9fa;
+  --footer-background: #f5f9fe;
   // Theming of styled components
   --button-text-color: var(--link-color);
   --button-background-color: var(--gm-3-white);

diff --git a/static/css/shared/_ranking_unit.scss b/static/css/shared/_ranking_unit.scss
@@ -22,6 +22,7 @@
   .chart-footnote {
     font-weight: 500;
     margin: 8px 0 0 0;
+    padding: 0 24px;
   }
 }
 

diff --git a/static/css/shared/_tiles.scss b/static/css/shared/_tiles.scss
@@ -122,11 +122,16 @@ $box-shadow-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
 .chart-container.disaster-event-map-tile {
   border: var(--border-primary);
   border-radius: var(--border-radius-primary);
+  overflow: hidden;
   padding: 0;
 }
 
 .chart-container.ranking-tile {
-  padding-top: 15.5px;
+  padding: 0;
+  .loading {
+    flex-grow: 1;
+    padding: 24px 24px 16px;
+  }
 }
 
 .svg-container,
@@ -144,7 +149,7 @@ $box-shadow-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
 }
 
 .initial-loading-placeholder {
-  background-color: var(--light);
+  background-color: var(--loading-background) !important;
 }
 
 /** footnotes */
@@ -283,19 +288,15 @@ $box-shadow-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
     font-weight: 600;
     font-size: 0.8rem;
   }
-
-  footer {
-    padding: 16px 0;
-  }
 }
 
 .ranking-unit-container {
-  padding: 0 0.5rem;
   display: flex;
   flex-direction: column;
 
   .ranking-list {
     flex-grow: 1;
+    padding: 24px 24px 16px 24px;
   }
 }
 

diff --git a/static/css/tools/visualization.scss b/static/css/tools/visualization.scss
@@ -594,7 +594,6 @@ $selector-footer-height: 40px;
   .ranking-tile {
     display: flex;
     flex-wrap: wrap;
-    padding: 1rem;
 
     h4 {
       text-align: left;

diff --git a/static/custom_dc/climate_trace/overrides.css b/static/custom_dc/climate_trace/overrides.css
@@ -17,7 +17,7 @@
 :root {
   --dc-primary: #110c45;
   --link-color: #4c49b0;
-  --footer-bg: white;
+  --footer-background: white;
   --dc-red-fade: #40d4e033;
 }
 
@@ -45,4 +45,4 @@
 
 #main-footer {
   border-top: 1px solid #efefef;
-}
+}
diff --git a/static/custom_dc/custom/overrides.css b/static/custom_dc/custom/overrides.css
@@ -17,7 +17,7 @@
 :root {
   --dc-primary: #5d5f65;
   --link-color: #514ea3;
-  --footer-bg: white;
+  --footer-background: white;
   --dc-red-fade: #40d4e033;
 }
 
@@ -45,4 +45,4 @@
 
 #main-footer {
   border-top: 1px solid #efefef;
-}
+}
diff --git a/static/custom_dc/iitm/style.css b/static/custom_dc/iitm/style.css
@@ -9,7 +9,7 @@
   --iitm-section-text: #0d0952;
   --dc-primary: #80296e;
   --link-color: #80296e;
-  --footer-bg: #0b1434;
+  --footer-background: #0b1434;
 }
 
 header.masthead {
@@ -59,7 +59,7 @@ header.masthead p {
 
   .nav-item .nav-link,
   #main-nav .navbar-brand .sep {
-    color: rgba(255,255,255,.5)
+    color: rgba(255, 255, 255, 0.5);
   }
 }
 

diff --git a/static/custom_dc/unsdg/overrides.css b/static/custom_dc/unsdg/overrides.css
@@ -17,7 +17,7 @@
 :root {
   --dc-primary: #110c45;
   --link-color: #4c49b0;
-  --footer-bg: white;
+  --footer-background: white;
   --dc-red-fade: #40d4e033;
 }
 

diff --git a/static/js/apps/visualization/vis_type_configs/map_config.tsx b/static/js/apps/visualization/vis_type_configs/map_config.tsx
@@ -143,7 +143,6 @@ export function getChartArea(
               hover
             );
           }}
-          showLoadingSpinner={true}
         />
       </div>
     </>

diff --git a/static/js/apps/visualization/vis_type_configs/scatter_config.tsx b/static/js/apps/visualization/vis_type_configs/scatter_config.tsx
@@ -174,7 +174,6 @@ function getChartArea(
           showPlaceLabels: appContext.displayOptions.scatterPlaceLabels,
           showQuadrants: appContext.displayOptions.scatterQuadrants,
         }}
-        showLoadingSpinner={true}
       />
       <ChartFooter
         inputSections={[

diff --git a/static/js/apps/visualization/vis_type_configs/timeline_config.tsx b/static/js/apps/visualization/vis_type_configs/timeline_config.tsx
@@ -188,7 +188,6 @@ function getChartArea(
               svgChartHeight={chartHeight}
               place={appContext.places[0]}
               colors={COLORS}
-              showLoadingSpinner={true}
               showTooltipOnHover={true}
             />
             <ChartFooter

diff --git a/static/js/components/ranking_unit.tsx b/static/js/components/ranking_unit.tsx
@@ -20,6 +20,7 @@
 
 import _ from "lodash";
 import React, { RefObject, useContext } from "react";
+import { Spinner } from "reactstrap";
 
 import { RankingUnitUrlFuncContext } from "../../js/shared/context";
 import { ASYNC_ELEMENT_CLASS } from "../constants/css_constants";
@@ -77,6 +78,7 @@ interface RankingUnitPropType {
   errorMsg?: string;
   apiRoot?: string;
   entityType?: string;
+  isLoading?: boolean;
 }
 
 // Calculates ranks based on the order of data if no rank is provided.
@@ -137,14 +139,18 @@ export function RankingUnit(props: RankingUnitPropType): JSX.Element {
     props.isHighest,
     props.numDataPoints
   );
-
   return (
     <div
       className={"ranking-list " + ASYNC_ELEMENT_CLASS}
       ref={props.forwardRef}
     >
       <div className="ranking-header-section">
-        <h4>{props.title}</h4>
+        <h4>
+          {props.isLoading ? (
+            <Spinner color="secondary" size="sm" className="mr-1" />
+          ) : null}
+          {props.title}
+        </h4>
         {props.headerChild}
       </div>
       {props.errorMsg ? (

diff --git a/static/js/components/tiles/bar_tile.tsx b/static/js/components/tiles/bar_tile.tsx
@@ -119,11 +119,17 @@ export function BarTile(props: BarTilePropType): JSX.Element {
   const [barChartData, setBarChartData] = useState<BarChartData | undefined>(
     null
   );
+  const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     if (!barChartData || !_.isEqual(barChartData.props, props)) {
       (async () => {
-        const data = await fetchData(props);
-        setBarChartData(data);
+        setIsLoading(true);
+        try {
+          const data = await fetchData(props);
+          setBarChartData(data);
+        } finally {
+          setIsLoading(false);
+        }
       })();
     }
   }, [props, barChartData]);
@@ -138,18 +144,19 @@ export function BarTile(props: BarTilePropType): JSX.Element {
   useDrawOnResize(drawFn, chartContainerRef.current);
   return (
     <ChartTileContainer
-      id={props.id}
-      title={props.title}
-      subtitle={props.subtitle}
-      sources={props.sources || (barChartData && barChartData.sources)}
-      replacementStrings={getReplacementStrings(barChartData)}
-      className={`${props.className} bar-chart`}
       allowEmbed={true}
-      getDataCsv={getDataCsvCallback(props)}
-      isInitialLoading={_.isNull(barChartData)}
+      className={`${props.className} bar-chart`}
       exploreLink={props.showExploreMore ? getExploreLink(props) : null}
-      hasErrorMsg={barChartData && !!barChartData.errorMsg}
       footnote={props.footnote}
+      getDataCsv={getDataCsvCallback(props)}
+      hasErrorMsg={barChartData && !!barChartData.errorMsg}
+      id={props.id}
+      isInitialLoading={_.isNull(barChartData)}
+      isLoading={isLoading}
+      replacementStrings={getReplacementStrings(barChartData)}
+      sources={props.sources || (barChartData && barChartData.sources)}
+      subtitle={props.subtitle}
+      title={props.title}
     >
       <div
         id={props.id}

diff --git a/static/js/components/tiles/chart_tile.tsx b/static/js/components/tiles/chart_tile.tsx
@@ -20,7 +20,6 @@
 
 import _ from "lodash";
 import React, { useRef } from "react";
-import { Spinner } from "reactstrap";
 
 import { ASYNC_ELEMENT_HOLDER_CLASS } from "../../constants/css_constants";
 import { INITIAL_LOADING_CLASS } from "../../constants/tile_constants";
@@ -34,6 +33,7 @@ import {
 } from "../../utils/tile_utils";
 import { NlChartFeedback } from "../nl_feedback";
 import { ChartFooter } from "./chart_footer";
+import { LoadingHeader } from "./loading_header";
 interface ChartTileContainerProp {
   id: string;
   isLoading?: boolean;
@@ -84,21 +84,7 @@ export function ChartTileContainer(props: ChartTileContainerProp): JSX.Element {
         }`}
       >
         <div className="chart-headers">
-          {
-            /* We want to render this header element even if title is empty
-            to keep the space on the page */
-            props.title && (
-              <h4 {...{ part: "header" }}>
-                {props.isLoading ? (
-                  <>
-                    <Spinner color="secondary" size="sm" className="pr-1" />
-                    {title ? "" : " Loading..."}
-                  </>
-                ) : null}{" "}
-                {title}
-              </h4>
-            )
-          }
+          <LoadingHeader isLoading={props.isLoading} title={title} />
           <slot name="subheader" {...{ part: "subheader" }}>
             {props.subtitle && !props.isInitialLoading ? (
               <div className="subheader">{props.subtitle}</div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -143,7 +143,6 @@ export function getChartArea( @@
                   hover
                 );
               }}
-              showLoadingSpinner={true}
             />
           </div>
         </>
@@ Expand Down @@