Children prop with hidden visibility

Author: omerkucuk-teknasyon

src/Skeleton.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable react/no-array-index-key */
-import React, { CSSProperties, PropsWithChildren, ReactElement } from 'react';
+import React, {
+  CSSProperties,
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+} from 'react';
 import { SkeletonThemeContext } from './SkeletonThemeContext.js';
 import { SkeletonStyleProps } from './SkeletonStyleProps.js';
 
@@ -59,6 +64,8 @@ export interface SkeletonProps extends SkeletonStyleProps {
 
   circle?: boolean;
   style?: CSSProperties;
+
+  children?: ReactNode | JSX.Element | string;
 }
 
 export function Skeleton({
@@ -72,6 +79,8 @@ export function Skeleton({
   circle = false,
 
   style: styleProp,
+
+  children,
   ...originalPropsStyleOptions
 }: SkeletonProps): ReactElement {
   const contextStyleOptions = React.useContext(SkeletonThemeContext);
@@ -104,6 +113,12 @@ export function Skeleton({
 
   const inline = styleOptions.inline ?? false;
 
+  const childrenContent = children ? (
+    <div style={{ visibility: 'hidden' }}>{children}</div>
+  ) : (
+    <>&zwnj;</>
+  );
+
   const elements: ReactElement[] = [];
 
   const countCeil = Math.ceil(count);
@@ -133,7 +148,7 @@ export function Skeleton({
 
     const skeletonSpan = (
       <span className={className} style={thisStyle} key={i}>
-        &zwnj;
+        {childrenContent}
       </span>
     );
 

src/__stories__/Skeleton.stories.tsx

@@ -30,6 +30,16 @@ export const Inline: React.FC = () => (
   </SideBySide>
 );
 
+export const WithChildren: React.FC = () => (
+  <SideBySide>
+    <div>
+      <Skeleton width={100} inline style={{ marginRight: '0.5rem' }}>
+        <div>Loading...</div>
+      </Skeleton>
+    </div>
+  </SideBySide>
+);
+
 export const InlineWithText: React.FC = () => (
   <div>
     Some random text <Skeleton width={150} inline /> Some more random text

src/__tests__/Skeleton.test.tsx

@@ -23,6 +23,21 @@ it('renders a skeleton', () => {
   expect(skeletonElements[0]).not.toHaveAttribute('style');
 });
 
+it('renders a skeleton with children', () => {
+  render(
+    <Skeleton>
+      <div>Loading...</div>
+    </Skeleton>
+  );
+
+  const skeletonElements = getAllSkeletons();
+
+  expect(skeletonElements).toHaveLength(1);
+  expect(skeletonElements[0]).toBeVisible();
+
+  expect(skeletonElements[0]).toHaveTextContent('Loading...');
+});
+
 it('renders the required number of skeletons', () => {
   render(<Skeleton count={4} />);