({children}: {children: SkeletonElement})
| 136 | |
| 137 | // Clones the child element and displays it with skeleton styling. |
| 138 | export function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode { |
| 139 | let isLoading = useContext(SkeletonContext); |
| 140 | let animation = useLoadingAnimation(isLoading || false); |
| 141 | if (isLoading == null) { |
| 142 | return children; |
| 143 | } |
| 144 | |
| 145 | let childRef = |
| 146 | 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get |
| 147 | ? (children.ref as any) |
| 148 | : children.props.ref; |
| 149 | return ( |
| 150 | <SkeletonContext.Provider value={null}> |
| 151 | {isLoading |
| 152 | ? cloneElement(children, { |
| 153 | ref: mergeRefs(childRef, animation), |
| 154 | className: (children.props.className || '') + ' ' + loadingStyle, |
| 155 | // @ts-ignore - compatibility with React < 19 |
| 156 | inert: inertValue(true) |
| 157 | }) |
| 158 | : children} |
| 159 | </SkeletonContext.Provider> |
| 160 | ); |
| 161 | } |
| 162 | |
| 163 | // Adds default border radius around icons when displayed in a skeleton. |
| 164 | export function useSkeletonIcon(styles: StyleString): StyleString { |
nothing calls this directly
no test coverage detected