import React from 'react' ; import { Bracket , RenderSeedProps , Seed , SeedItem , SeedTeam , SeedTime } from 'react-brackets' ; import './loading.css' ; const loadingData = [ { title : 'Loading..' , seeds : [ { } , { id : 1 , } , { } , { id : 1 , } , ] , } , { title : 'Loading..' , seeds : [ ... new Array ( 2 ) ] . fill ( { id : 1 , } ) , } , { title : 'Loading..' , seeds : [ ... new Array ( 1 ) ] . fill ( { id : 1 , } ) , } , ] ; const RenderLoadingSeed = ( { seed , breakpoint } ) => { return ( < Seed mobileBreakpoint = { breakpoint } className = 'test' > < SeedItem className = 'skeleton-item' > < div > { } < SeedTeam > . < /SeedTeam> < SeedTeam > . < /SeedTeam> < /div> < /SeedItem> < SeedTime mobileBreakpoint = { breakpoint } style = { { fontSize : 9 } } > { seed . date } < /SeedTime> < /Seed>); } ; const LoadingBracket = ( ) => { return < Bracket rounds = { loadingData } renderSeedComponent = { RenderLoadingSeed } / > ; } ; export default LoadingBracket ;