From 0652ac97e2b0b63b95b1eaaf2b449352317d55b8 Mon Sep 17 00:00:00 2001
From: Terrence Keane <terrence.keane@mongodb.com>
Date: Wed, 29 Jan 2025 10:57:15 -0500
Subject: [PATCH] Remove `loading-indicator` / `lottie` dependency from
 `@lg-charts/core` (#2667)

* Remove Lottie dependency

* Lint

* Changeset
---
 .changeset/ten-spies-breathe.md       |  5 +++++
 charts/core/package.json              |  1 -
 charts/core/src/Chart.stories.tsx     |  3 ++-
 charts/core/src/Chart/Chart.styles.ts | 12 ++++++++++--
 charts/core/src/Chart/Chart.tsx       | 15 +++++++++++----
 pnpm-lock.yaml                        |  3 ---
 6 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/ten-spies-breathe.md

diff --git a/.changeset/ten-spies-breathe.md b/.changeset/ten-spies-breathe.md
new file mode 100644
index 0000000000..208d98dcd5
--- /dev/null
+++ 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
index c4b952cf0f..8b60b3c7c2 100644
--- 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
index 1fe1f62caa..d25cf416b2 100644
--- 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
index 638d00175d..5a94d1a526 100644
--- 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
index 4d35b51dc5..3034a9efae 100644
--- 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
index 87c41ca822..a14266b3df 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -129,9 +129,6 @@ importers:
       '@leafygreen-ui/lib':
         specifier: workspace:^
         version: link:../../packages/lib
-      '@leafygreen-ui/loading-indicator':
-        specifier: workspace:^
-        version: link:../../packages/loading-indicator
       '@leafygreen-ui/palette':
         specifier: workspace:^
         version: link:../../packages/palette