import { Fragment , useState , useRef } from 'react' ; import { Dialog , Transition } from '@headlessui/react' ; import type { PropsFromRedux } from '../../services/store/connectivity/server' ; import { connector } from '../../services/store/connectivity/server' ; interface Props extends PropsFromRedux { } const Loading = ( props ) => { const [ open , setOpen ] = useState ( true ) ; const initFocusRef = useRef ( null ) ; return ( < Transition . Root show = { props . isLoading } as = { Fragment } > < Dialog as = "div" static initialFocus = { initFocusRef } className = "fixed z-10 inset-0 overflow-y-auto" open = { props . isLoading } onClose = { setOpen } > < div className = "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" > < Transition . Child as = { Fragment } enter = "ease-out duration-300" enterFrom = "opacity-0" enterTo = "opacity-100" leave = "ease-in duration-200" leaveFrom = "opacity-100" leaveTo = "opacity-0" > < Dialog . Overlay className = "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" / > < /Transition.Child> { } < span className = "hidden sm:inline-block sm:align-middle sm:h-screen" aria - hidden = "true" > & # 8203 ; < /span> < Transition . Child as = { Fragment } enter = "ease-out duration-300" enterFrom = "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo = "opacity-100 translate-y-0 sm:scale-100" leave = "ease-in duration-200" leaveFrom = "opacity-100 translate-y-0 sm:scale-100" leaveTo = "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > < div className = "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6" > < div > < div className = "mx-auto flex items-center justify-center h-12 w-12 rounded-full" > < svg className = "animate-spin h-6 w-6" viewBox = "0 0 24 24" > < circle className = "opacity-25" cx = "12" cy = "12" r = "10" stroke = "currentColor" strokeWidth = "4" > < /circle> < path className = "opacity-75" fill = "currentColor" d = "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" > < /path> < /svg> < /div> < div className = "mt-3 text-center sm:mt-5" > < Dialog . Title as = "h3" className = "text-lg leading-6 font-medium text-gray-900" > Fetching information ... < /Dialog.Title> < div className = "mt-2" > < p className = "text-sm text-gray-500" > Please wait patiently . < /p> < /div> < /div> < /div> < div className = "mt-5 sm:mt-6" > < button type = "button" className = "inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm" onClick = { ( ) => setOpen ( false ) } ref = { initFocusRef } > Go back to dashboard < /button> < /div> < /div> < /Transition.Child> < /div> < /Dialog> < /Transition.Root>); } ; export default connector ( Loading ) ;