From 0b58013573307abab1d50e8feb2eefd47322af2b Mon Sep 17 00:00:00 2001
From: manpham-saritasa <man.pham@saritasa.com>
Date: Tue, 27 Aug 2024 10:29:05 +0700
Subject: [PATCH] Develop createListSkeleton JC-718

---
 .../studios/components/StudiosList/StudiosList.tsx       | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/apps/react/src/features/studios/components/StudiosList/StudiosList.tsx b/apps/react/src/features/studios/components/StudiosList/StudiosList.tsx
index 72d5336..747d053 100644
--- a/apps/react/src/features/studios/components/StudiosList/StudiosList.tsx
+++ b/apps/react/src/features/studios/components/StudiosList/StudiosList.tsx
@@ -58,6 +58,11 @@ const StudiosListComponent: FC = () => {
 		[nextCursor],
 	);
 
+	/** Create skeletons for list. */
+	function createListSkeleton(): JSX.Element[] {
+		return Array.from(new Array(10)).map((_, index) => <ListItemSkeleton key={index} />);
+	}
+
 	return (
 		<Box
 			component='section'
@@ -70,9 +75,7 @@ const StudiosListComponent: FC = () => {
 			}}
 		>
 			<List disablePadding>
-				{isLoading &&
-					studiosList.length === 0 &&
-					Array.from(new Array(10)).map((_, index) => <ListItemSkeleton key={index} />)}
+				{isLoading && studiosList.length === 0 && createListSkeleton()}
 
 				{studiosList.map((studio, index) => {
 					if (studiosList.length === index + 1) {