From e69aae5d5c829fc9aa21d221b289ee54fc6c2f1f Mon Sep 17 00:00:00 2001
From: Oleg Panichev <oleg.panichev@globallogic.com>
Date: Thu, 21 Apr 2022 13:52:48 +0300
Subject: [PATCH 1/2] Fix the issue `The component Styled(styled.span) has been
 created dynamically`

---
 CHANGELOG.md                      |  4 ++++
 package.json                      |  2 +-
 src/components/Skeleton/index.tsx | 31 ++++++++++++++-----------------
 3 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b387609..3edf6f98 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Precise UI Changelog
 
+## 2.1.12
+
+- Fix the issue `The component Styled(styled.span) has been created dynamically`
+
 ## 2.1.11
 
 - fixed issue 373, passed onSizeChanged event as a prop to the Pagination component
diff --git a/package.json b/package.json
index 0bd0f850..698cf174 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "precise-ui",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "Precise UI React component library powered by Styled Components.",
   "keywords": [
     "react",
diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 91ec8e5b..6a250558 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -61,30 +61,27 @@ const Span = styled.span`
 
 const randomInt = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
 
+const formatValue = (value: string | number) => {
+  return typeof value === 'number' ? `${value}px` : value;
+};
+
+const StyledSpan = styled(Span)<SkeletonProps>`
+  ${({ count = 1, duration = 1.2, width = '100%', height = '100%', isCircle, isText, isPulsing = true }) => css`
+    animation: ${shine} ${duration}s infinite linear ${isPulsing ? 'running' : 'running'};
+    width: ${count > 1 && isText ? `${randomInt(80, 100)}%` : formatValue(width)};
+    height: ${formatValue(height)};
+    ${(height && width && isCircle && 'border-radius: 50%') || ''};
+  `}
+`;
+
 /**
  * The `Sekeleton` component displays a low fidelity UI into which information will be gradually loaded.
  */
 export const Skeleton: React.FC<SkeletonProps> = props => {
-  const { count = 1, duration = 1.2, width = '100%', height = '100%', isCircle, isText, isPulsing = true } = props;
+  const { count = 1 } = props;
   const skeletons = [];
 
   for (let i = 0; i < count; i++) {
-    const StyledSpan = styled(Span)`
-      animation: ${shine} ${duration}s infinite linear ${!isPulsing ? 'paused' : 'running'};
-
-      ${count > 1 && isText
-        ? { width: `${randomInt(80, 100)}%` }
-        : { width: typeof width === 'number' ? `${width}px` : width }};
-
-      height: ${typeof height === 'number' ? `${height}px` : height};
-
-      ${height &&
-        width &&
-        isCircle && {
-          borderRadius: '50%',
-        }};
-    `;
-
     skeletons.push(
       <StyledSpan key={i} {...props}>
         &zwnj;

From 3fb853cbd206b0da62e1dba29379cee30606c819 Mon Sep 17 00:00:00 2001
From: Oleg Panichev <oleg.panichev@globallogic.com>
Date: Thu, 21 Apr 2022 15:50:30 +0300
Subject: [PATCH 2/2] Code review fixes

---
 src/components/Skeleton/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Skeleton/index.tsx b/src/components/Skeleton/index.tsx
index 6a250558..b026ec72 100644
--- a/src/components/Skeleton/index.tsx
+++ b/src/components/Skeleton/index.tsx
@@ -66,8 +66,8 @@ const formatValue = (value: string | number) => {
 };
 
 const StyledSpan = styled(Span)<SkeletonProps>`
-  ${({ count = 1, duration = 1.2, width = '100%', height = '100%', isCircle, isText, isPulsing = true }) => css`
-    animation: ${shine} ${duration}s infinite linear ${isPulsing ? 'running' : 'running'};
+  ${({ count, duration = 1.2, width = '100%', height = '100%', isCircle, isText, isPulsing = true }) => css`
+    animation: ${shine} ${duration}s infinite linear ${isPulsing ? 'running' : 'paused'};
     width: ${count > 1 && isText ? `${randomInt(80, 100)}%` : formatValue(width)};
     height: ${formatValue(height)};
     ${(height && width && isCircle && 'border-radius: 50%') || ''};
@@ -83,7 +83,7 @@ export const Skeleton: React.FC<SkeletonProps> = props => {
 
   for (let i = 0; i < count; i++) {
     skeletons.push(
-      <StyledSpan key={i} {...props}>
+      <StyledSpan key={i} count={count} {...props}>
         &zwnj;
       </StyledSpan>,
     );