Remove loading-indicator / lottie dependency from `@lg-charts/cor…

…e` (#2667) * Remove Lottie dependency * Lint * Changeset
mongodb · Jan 29, 2025 · 0652ac9 · 0652ac9
1 parent 19105f5
commit 0652ac9
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 11 deletions.
diff --git a/.changeset/ten-spies-breathe.md b/.changeset/ten-spies-breathe.md
@@ -0,0 +1,5 @@
+---
+'@lg-charts/core': patch
+---
+
+Removes spinner animation from `Chart` loading state
diff --git a/charts/core/package.json b/charts/core/package.json
@@ -20,7 +20,6 @@
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/icon-button": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
-    "@leafygreen-ui/loading-indicator": "workspace:^",
     "@leafygreen-ui/palette": "workspace:^",
     "@leafygreen-ui/tokens": "workspace:^",
     "@leafygreen-ui/typography": "workspace:^",

diff --git a/charts/core/src/Chart.stories.tsx b/charts/core/src/Chart.stories.tsx
@@ -78,6 +78,7 @@ const defaultArgs: Omit<
   | 'tooltipValueFormatter'
 > = {
   data: makeLineData(5),
+  chartState: 'unset',
   horizontalGridLines: true,
   verticalGridLines: false,
   renderGrid: true,
@@ -126,7 +127,7 @@ export default {
     },
     chartState: {
       control: 'select',
-      options: ['default', 'loading'],
+      options: ['unset', 'loading'],
       description: 'The state of the chart',
       table: {
         category: 'Chart',

diff --git a/charts/core/src/Chart/Chart.styles.ts b/charts/core/src/Chart/Chart.styles.ts
@@ -1,4 +1,6 @@
 import { css } from '@leafygreen-ui/emotion';
+import { Theme } from '@leafygreen-ui/lib';
+import { color, InteractionState, Variant } from '@leafygreen-ui/tokens';
 
 export const chartContainerStyles = css`
   display: grid;
@@ -28,8 +30,10 @@ export const chartStyles = css`
   z-index: 0;
 `;
 
-export const loadingOverlayStyles = css`
-  background: white;
+export const getLoadingOverlayStyles = (theme: Theme) => css`
+  background: ${color[theme].background[Variant.Primary][
+    InteractionState.Default
+  ]};
   display: flex;
   align-items: center;
   justify-content: center;
@@ -38,3 +42,7 @@ export const loadingOverlayStyles = css`
   width: 100%;
   z-index: 1;
 `;
+
+export const getLoadingTextStyles = (theme: Theme) => css`
+  color: ${color[theme].text[Variant.Secondary][InteractionState.Default]};
+`;
diff --git a/charts/core/src/Chart/Chart.tsx b/charts/core/src/Chart/Chart.tsx
@@ -11,7 +11,8 @@ import { cx } from '@leafygreen-ui/emotion';
 import LeafyGreenProvider, {
   useDarkMode,
 } from '@leafygreen-ui/leafygreen-provider';
-import { Spinner } from '@leafygreen-ui/loading-indicator';
+import { BaseFontSize } from '@leafygreen-ui/tokens';
+import { Body } from '@leafygreen-ui/typography';
 
 import { ChartProvider } from '../ChartContext';
 
@@ -20,7 +21,8 @@ import {
   chartHeaderContainerStyles,
   chartStyles,
   chartWrapperStyles,
-  loadingOverlayStyles,
+  getLoadingOverlayStyles,
+  getLoadingTextStyles,
 } from './Chart.styles';
 import { ChartProps, ChartStates } from './Chart.types';
 import { useChart } from './hooks';
@@ -60,8 +62,13 @@ export function Chart({
           </div>
           <div className={chartWrapperStyles}>
             {chartState === ChartStates.Loading && (
-              <div className={loadingOverlayStyles}>
-                <Spinner description="Loading chart..." />
+              <div className={getLoadingOverlayStyles(theme)}>
+                <Body
+                  className={getLoadingTextStyles(theme)}
+                  baseFontSize={BaseFontSize.Body2}
+                >
+                  Loading chart...
+                </Body>
               </div>
             )}
             <div

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml