{"version":3,"file":"index-BatPEyW4.js","sources":["../../Client/app/Components/LoadingSkeleton/index.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { CSSProperties, PropsWithChildren, ReactElement } from 'react';\r\nimport Skeleton from 'react-loading-skeleton';\r\n\r\ninterface LoadingSkeletonProps {\r\n    loading: boolean | undefined | null;\r\n    skeleton: ReactElement;\r\n    className?: string;\r\n}\r\n\r\n/** A component to streamline displaying a loading skeleton in place of an element when a boolean loading state is true. The LoadingSkeleton provides a full-width\r\n * wrapper around the provided ElementSkeleton component(s). While loading, the skeleton is displayed. Otherwise the children are displayed. */\r\nexport function LoadingSkeleton({ loading, skeleton, className, children }: PropsWithChildren<LoadingSkeletonProps>) {\r\n    return loading ?\r\n            <div style={{ width: '100%' }} className={className}>\r\n                {skeleton}\r\n            </div>\r\n        :   <>{children}</>;\r\n}\r\n\r\ninterface ElementSkeletonProps {\r\n    height: number;\r\n    style?: CSSProperties;\r\n}\r\n\r\n/** A wrapper around the react-loading-skeleton Skeleton component. Passed into the LoadingSkeleton component, the width setting ensures the loading skeleton spans 100% of\r\n * the width of its container (something that doesn't work by default with the library). Pass in a height and optional style object. */\r\nexport function ElementSkeleton({ height, style }: ElementSkeletonProps) {\r\n    return <Skeleton width={'100%'} height={height} style={style} />;\r\n}\r\n"],"names":["ElementSkeleton","height","style","jsx","Skeleton"],"mappings":"qFA2BO,SAASA,EAAgB,CAAE,OAAAC,EAAQ,MAAAC,GAA+B,CACrE,OAAQC,EAAAA,IAAAC,EAAA,CAAS,MAAO,OAAQ,OAAAH,EAAgB,MAAAC,EAAc,CAClE"}