| 91 | 'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z'; |
| 92 | |
| 93 | export const Skeleton: React.FC<React.PropsWithChildren<ISkeletonProps>> = (props) => { |
| 94 | const { |
| 95 | count = 1, |
| 96 | width, |
| 97 | wrapper: Wrapper, |
| 98 | height, |
| 99 | circle, |
| 100 | image, |
| 101 | style: customStyle, |
| 102 | className: customClassName, |
| 103 | disabledAnimation = false, |
| 104 | } = props; |
| 105 | const elements:JSX.Element[] = []; |
| 106 | |
| 107 | for (let i = 0; i < count; i++) { |
| 108 | const style:React.CSSProperties = {}; |
| 109 | |
| 110 | if (width != null) { |
| 111 | style.width = width; |
| 112 | } |
| 113 | |
| 114 | if (height != null) { |
| 115 | style.height = height; |
| 116 | } |
| 117 | |
| 118 | if (circle) { |
| 119 | style.borderRadius = '50%'; |
| 120 | } |
| 121 | |
| 122 | let className = image ? 'react-image-skeleton' : 'react-loading-skeleton'; |
| 123 | if (customClassName) { |
| 124 | className += ' ' + customClassName; |
| 125 | } |
| 126 | |
| 127 | elements.push( |
| 128 | <SkeletonStyles |
| 129 | key={i} |
| 130 | className={className} |
| 131 | style={{ |
| 132 | ...customStyle, |
| 133 | ...style, |
| 134 | }} |
| 135 | disabledAnimation={disabledAnimation} |
| 136 | > |
| 137 | {image && <svg |
| 138 | viewBox="0 0 1098 1024" |
| 139 | xmlns="http://www.w3.org/2000/svg" |
| 140 | className="image-svg-skeleton" |
| 141 | > |
| 142 | <path d={path} /> |
| 143 | </svg>} |
| 144 | </SkeletonStyles> |
| 145 | ); |
| 146 | } |
| 147 | |
| 148 | return ( |
| 149 | <> |
| 150 | {Wrapper |