react-global-loading
Version:
Global loading screen for React
1 lines • 4.14 kB
Source Map (JSON)
{"version":3,"sources":["../src/GlobalLoading.tsx"],"sourcesContent":["import React, { CSSProperties, FC, ReactElement, useEffect, useState } from 'react';\n\ntype Listener = React.Dispatch<React.SetStateAction<boolean>> | ((value: boolean) => void);\nexport let showLoading: Listener = () => {};\n\nexport const show = () => {\n if (showLoading) {\n showLoading(true);\n }\n};\n\nexport const hide = () => {\n if (showLoading) {\n showLoading(false);\n }\n};\n\nexport const globalLoading = {\n show,\n hide\n};\n\ninterface GlobalLoadingProps {\n children?: React.ReactNode;\n WrapperComponent?: (props: any) => ReactElement;\n backgroundColor?: string;\n zIndex?: number;\n loadingSize?: number;\n loadingColor?: string;\n loadingBackgroundColor?: string;\n loadingThickness?: number;\n loadingSpeed?: number;\n blur?: number;\n}\nexport const GlobalLoading: FC<GlobalLoadingProps> = props => {\n const {\n children,\n WrapperComponent,\n loadingSize = 70,\n loadingColor = '#eee',\n loadingBackgroundColor = '#000',\n loadingSpeed = 1,\n loadingThickness = 7,\n backgroundColor = 'rgba(0, 0, 0, 0.6)',\n zIndex = 999,\n blur = 0,\n ...rest\n } = props || {};\n const [loading, setLoading] = useState(false);\n\n useEffect(() => {\n showLoading = setLoading;\n }, []);\n\n // loading indicator\n const _renderLoading = () => (\n <>\n <style>{`\n @keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n `}</style>\n <div\n style={{\n position: 'relative',\n animation: `spin ${loadingSpeed}s linear infinite`\n }}\n >\n <div\n style={{\n width: loadingSize,\n height: loadingSize,\n borderRadius: '50%',\n border: `${loadingThickness}px solid`,\n borderColor: `${loadingColor} ${loadingBackgroundColor} ${loadingBackgroundColor} ${loadingBackgroundColor}`\n }}\n />\n </div>\n </>\n );\n\n const style = {\n ...$globalLoading,\n zIndex,\n backgroundColor,\n backdropFilter: `blur(${blur}px)`\n };\n\n if (!loading) return null;\n if (WrapperComponent)\n return <WrapperComponent {...rest}>{children || _renderLoading()}</WrapperComponent>;\n return <div style={style}>{children || _renderLoading()}</div>;\n};\n\nconst $globalLoading: CSSProperties = {\n position: 'fixed',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n width: '100vw',\n height: '100vh',\n\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n};\n"],"mappings":"AAAA,OAAOA,GAA0C,aAAAC,EAAW,YAAAC,MAAgB,QAGrE,IAAIC,EAAwB,IAAM,CAAC,EAE7BC,EAAO,IAAM,CACpBD,GACFA,EAAY,EAAI,CAEpB,EAEaE,EAAO,IAAM,CACpBF,GACFA,EAAY,EAAK,CAErB,EAEaG,EAAgB,CAC3B,KAAAF,EACA,KAAAC,CACF,EAcaE,EAAwCC,GAAS,CAC5D,GAAM,CACJ,SAAAC,EACA,iBAAAC,EACA,YAAAC,EAAc,GACd,aAAAC,EAAe,OACf,uBAAAC,EAAyB,OACzB,aAAAC,EAAe,EACf,iBAAAC,EAAmB,EACnB,gBAAAC,EAAkB,qBAClB,OAAAC,EAAS,IACT,KAAAC,EAAO,KACJC,CACL,EAAIX,GAAS,CAAC,EACR,CAACY,EAASC,CAAU,EAAInB,EAAS,EAAK,EAE5CD,EAAU,IAAM,CACdE,EAAckB,CAChB,EAAG,CAAC,CAAC,EAGL,IAAMC,EAAiB,IACrBtB,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,aAAO;AAAA;AAAA;AAAA;AAAA;AAAA,SAKJ,EACJA,EAAA,cAAC,OACC,MAAO,CACL,SAAU,WACV,UAAW,QAAQc,oBACrB,GAEAd,EAAA,cAAC,OACC,MAAO,CACL,MAAOW,EACP,OAAQA,EACR,aAAc,MACd,OAAQ,GAAGI,YACX,YAAa,GAAGH,KAAgBC,KAA0BA,KAA0BA,GACtF,EACF,CACF,CACF,EAGIU,EAAQ,CACZ,GAAGC,EACH,OAAAP,EACA,gBAAAD,EACA,eAAgB,QAAQE,MAC1B,EAEA,OAAKE,EACDV,EACKV,EAAA,cAACU,EAAA,CAAkB,GAAGS,GAAOV,GAAYa,EAAe,CAAE,EAC5DtB,EAAA,cAAC,OAAI,MAAOuB,GAAQd,GAAYa,EAAe,CAAE,EAHnC,IAIvB,EAEME,EAAgC,CACpC,SAAU,QACV,IAAK,EACL,KAAM,EACN,MAAO,EACP,OAAQ,EACR,MAAO,QACP,OAAQ,QAER,QAAS,OACT,eAAgB,SAChB,WAAY,QACd","names":["React","useEffect","useState","showLoading","show","hide","globalLoading","GlobalLoading","props","children","WrapperComponent","loadingSize","loadingColor","loadingBackgroundColor","loadingSpeed","loadingThickness","backgroundColor","zIndex","blur","rest","loading","setLoading","_renderLoading","style","$globalLoading"]}