import React from "react"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; type SkeletonBaseProps = { className?: string; }; interface SkeletonContainer { as?: keyof JSX.IntrinsicElements; children?: React.ReactNode; className?: string; } const SkeletonAvatar: React.FC = ({ className }) => { return
; }; type SkeletonProps = { as: keyof JSX.IntrinsicElements | React.FC; className?: string; children: React.ReactNode; loading?: boolean; waitForTranslation?: boolean; loadingClassName?: string; } & (T extends React.FC ? P : T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : never); const Skeleton = ({ as, className = "", children, loading = false, /** * Assumes that the text needs translation by default and wait for it. */ waitForTranslation = true, /** * Classes that you need only in loading state */ loadingClassName = "", ...rest }: SkeletonProps) => { const { isLocaleReady } = useLocale(); loading = (waitForTranslation ? !isLocaleReady : false) || loading; const Component = as; return ( {children} ); }; const SkeletonText: React.FC = ({ className = "", invisible = false, style, }) => { return ( ); }; const SkeletonButton: React.FC = ({ className }) => { return (
); }; const SkeletonContainer: React.FC = ({ children, as, className }) => { const Component = as || "div"; return {children}; }; export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer }; export { default as Loader } from "./Loader";