From 67adfe0849fe48a038d192dc5ad20dc33a4070da Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 6 Mar 2024 13:44:58 -0800
Subject: [PATCH 1/2] Memoize basic skeleton component styles

---
 src/components/skeleton/skeleton_circle.tsx    | 5 ++---
 src/components/skeleton/skeleton_rectangle.tsx | 5 ++---
 src/components/skeleton/skeleton_title.tsx     | 5 ++---
 3 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/skeleton/skeleton_circle.tsx b/src/components/skeleton/skeleton_circle.tsx
index 0bbe9cb2331..e2e13b6b64e 100644
--- a/src/components/skeleton/skeleton_circle.tsx
+++ b/src/components/skeleton/skeleton_circle.tsx
@@ -9,8 +9,8 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
 
 import { EuiSkeletonLoading, _EuiSkeletonAriaProps } from './skeleton_loading';
 import { euiSkeletonCircleStyles } from './skeleton_circle.styles';
@@ -36,8 +36,7 @@ export const EuiSkeletonCircle: FunctionComponent<EuiSkeletonCircleProps> = ({
   children,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiSkeletonCircleStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiSkeletonCircleStyles);
   const cssStyles = [styles.euiSkeletonCircle, styles[size]];
 
   return (
diff --git a/src/components/skeleton/skeleton_rectangle.tsx b/src/components/skeleton/skeleton_rectangle.tsx
index aea4b26816b..8c7ca1db71a 100644
--- a/src/components/skeleton/skeleton_rectangle.tsx
+++ b/src/components/skeleton/skeleton_rectangle.tsx
@@ -9,8 +9,8 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
 import { logicalStyles } from '../../global_styling';
 
 import { EuiSkeletonLoading, _EuiSkeletonAriaProps } from './skeleton_loading';
@@ -44,8 +44,7 @@ export const EuiSkeletonRectangle: FunctionComponent<
   children,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiSkeletonRectangleStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiSkeletonRectangleStyles);
   const cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
 
   return (
diff --git a/src/components/skeleton/skeleton_title.tsx b/src/components/skeleton/skeleton_title.tsx
index 7186bd3ed8e..82fc4cf7d55 100644
--- a/src/components/skeleton/skeleton_title.tsx
+++ b/src/components/skeleton/skeleton_title.tsx
@@ -9,8 +9,8 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
 import { EuiTitleSize } from '../title';
 
 import { EuiSkeletonLoading, _EuiSkeletonAriaProps } from './skeleton_loading';
@@ -37,8 +37,7 @@ export const EuiSkeletonTitle: FunctionComponent<EuiSkeletonTitleProps> = ({
   children,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiSkeletonTitleStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiSkeletonTitleStyles);
   const cssStyles = [styles.euiSkeletonTitle, styles[size]];
 
   return (

From 9d405fe413e37f5793114d5895d21189c571d34e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 6 Mar 2024 13:45:14 -0800
Subject: [PATCH 2/2] Memoize skeleton text styles + line generation

---
 src/components/skeleton/skeleton_text.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/skeleton/skeleton_text.tsx b/src/components/skeleton/skeleton_text.tsx
index c4f046c34c1..4f3bfc8145d 100644
--- a/src/components/skeleton/skeleton_text.tsx
+++ b/src/components/skeleton/skeleton_text.tsx
@@ -6,11 +6,11 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, useMemo } from 'react';
 import classNames from 'classnames';
 
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
 import { TextSize } from '../text/text';
 
 import { EuiSkeletonLoading, _EuiSkeletonAriaProps } from './skeleton_loading';
@@ -45,14 +45,19 @@ export const EuiSkeletonText: FunctionComponent<EuiSkeletonTextProps> = ({
   children,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiSkeletonTextStyles(euiTheme);
-  const lineCssStyles = [styles.euiSkeletonText, styles[size]];
+  const styles = useEuiMemoizedStyles(euiSkeletonTextStyles);
+  const cssStyles = useMemo(
+    () => [styles.euiSkeletonText, styles[size]],
+    [styles, size]
+  );
 
-  const lineElements = [];
-  for (let i = 0; i < lines; i++) {
-    lineElements.push(<span key={i} css={lineCssStyles} />);
-  }
+  const lineElements = useMemo(() => {
+    const lineElements = [];
+    for (let i = 0; i < lines; i++) {
+      lineElements.push(<span key={i} css={cssStyles} />);
+    }
+    return lineElements;
+  }, [lines, cssStyles]);
 
   return (
     <EuiSkeletonLoading