@helpwave/hightide/dist/components/loading-states/LoadingAndErrorComponent.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/components/loading-states/LoadingContainer.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { useState } from 'react'\nimport { LoadingContainer } from './LoadingContainer'\nimport { clsx } from 'clsx'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n  isLoading?: boolean,\n  hasError?: boolean,\n  loadingComponent?: ReactNode,\n  errorComponent?: ReactNode,\n  /**\n   * in milliseconds\n   */\n  minimumLoadingDuration?: number,\n  className?: string,\n}>\n\n/**\n * A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n                                           children,\n                                           isLoading = false,\n                                           hasError = false,\n                                           loadingComponent,\n                                           errorComponent,\n                                           minimumLoadingDuration = 200,\n                                           className\n                                         }: LoadingAndErrorComponentProps) => {\n  const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n  const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n  if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n    setIsInMinimumLoading(true)\n    setTimeout(() => {\n      setIsInMinimumLoading(false)\n      setHasUsedMinimumLoading(true)\n    }, minimumLoadingDuration)\n  }\n\n  if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {\n    return (loadingComponent ?? <LoadingContainer className={clsx(className)}/>)\n  }\n  if (hasError) {\n    return (errorComponent ?? <LoadingContainer className={clsx('bg-negative', className)}/>)\n  }\n  return children\n}\n","import { clsx } from 'clsx'\n\nexport type LoadingComponentProps = {\n  className?: string,\n}\n\nexport const LoadingContainer = ({ className }: LoadingComponentProps) => {\n  return (\n    <div className={clsx('relative overflow-hidden shimmer bg-disabled-background rounded-md', className)}/>\n  )\n}"],"mappings":";AACA,SAAS,gBAAgB;;;ACDzB,SAAS,YAAY;AAQjB;AAFG,IAAM,mBAAmB,CAAC,EAAE,UAAU,MAA6B;AACxE,SACE,oBAAC,SAAI,WAAW,KAAK,sEAAsE,SAAS,GAAE;AAE1G;;;ADPA,SAAS,QAAAA,aAAY;AAqCW,gBAAAC,YAAA;AApBzB,IAAM,2BAA2B,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,yBAAyB;AAAA,EACzB;AACF,MAAqC;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAAS,KAAK;AACxE,MAAI,0BAA0B,CAAC,sBAAsB,CAAC,uBAAuB;AAC3E,0BAAsB,IAAI;AAC1B,eAAW,MAAM;AACf,4BAAsB,KAAK;AAC3B,+BAAyB,IAAI;AAAA,IAC/B,GAAG,sBAAsB;AAAA,EAC3B;AAEA,MAAI,aAAc,0BAA0B,oBAAqB;AAC/D,WAAQ,oBAAoB,gBAAAA,KAAC,oBAAiB,WAAWD,MAAK,SAAS,GAAE;AAAA,EAC3E;AACA,MAAI,UAAU;AACZ,WAAQ,kBAAkB,gBAAAC,KAAC,oBAAiB,WAAWD,MAAK,eAAe,SAAS,GAAE;AAAA,EACxF;AACA,SAAO;AACT;","names":["clsx","jsx"]}