Memoize basic skeleton component styles

elastic · Mar 7, 2024 · 67adfe0 · 67adfe0
1 parent 5cc4ce8
commit 67adfe0
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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 (