import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

const GridLoader = () => {
    return <div className='grid-loader-wrapper'>
                <div className='grid-loader'>
                    <Skeleton count={1} height={'60px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child first-child'/>
                    <div className='grid-loader-body'>
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                    </div>
                    <Skeleton count={1} height={'60px'} width={'96%'} containerClassName='grid-loader-inner-child' borderRadius={'10px'} className='grid-loader-last-child final-child'/>
                </div>
                <div className='grid-loader'>
                    <Skeleton count={1} height={'60px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child first-child'/>
                    <div className='grid-loader-body'>
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                    </div>
                    <Skeleton count={1} height={'60px'} width={'96%'} containerClassName='grid-loader-inner-child' borderRadius={'10px'} className='grid-loader-last-child final-child'/>
                </div>
                <div className='grid-loader'>
                    <Skeleton count={1} height={'60px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child first-child'/>
                    <div className='grid-loader-body'>
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                    </div>
                    <Skeleton count={1} height={'60px'} width={'96%'} containerClassName='grid-loader-inner-child' borderRadius={'10px'} className='grid-loader-last-child final-child'/>
                </div>
                <div className='grid-loader'>
                    <Skeleton count={1} height={'60px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child first-child'/>
                    <div className='grid-loader-body'>
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                    </div>
                    <Skeleton count={1} height={'60px'} width={'96%'} containerClassName='grid-loader-inner-child' borderRadius={'10px'} className='grid-loader-last-child final-child'/>
                </div>
                <div className='grid-loader'>
                    <Skeleton count={1} height={'60px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child first-child'/>
                    <div className='grid-loader-body'>
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                    </div>
                    <Skeleton count={1} height={'60px'} width={'96%'} containerClassName='grid-loader-inner-child' borderRadius={'10px'} className='grid-loader-last-child final-child'/>
                </div>
                <div className='grid-loader'>
                    <Skeleton count={1} height={'60px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child first-child'/>
                    <div className='grid-loader-body'>
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                        <Skeleton count={1} height={'25px'} width={'100%'} containerClassName='grid-loader-inner-child' borderRadius={'2px'} className='grid-loader-last-child' />
                    </div>
                    <Skeleton count={1} height={'60px'} width={'96%'} containerClassName='grid-loader-inner-child' borderRadius={'10x'} className='grid-loader-last-child final-child'/>
                </div>
            </div>

}

export default GridLoader;