Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Randomize widths of skeleton loader blocks

pull/10616/head
Alex P 2018-06-06 15:35:09 -07:00
parent 276e67148b
commit c0e43eae38
1 changed files with 11 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
ui/src/flux/components/LoaderSkeleton.tsx
View File

@ -1,9 +1,16 @@
import React, {SFC, MouseEvent} from 'react'
import React, {SFC, MouseEvent, CSSProperties} from 'react'
import _ from 'lodash'
const handleClick = (e: MouseEvent<HTMLDivElement>): void => {
e.stopPropagation()
}
const randomSize = (): CSSProperties => {
const width = _.random(60, 200)
return {width: `${width}px`}
}
const LoaderSkeleton: SFC = () => {
return (
<>
@ -13,28 +20,19 @@ const LoaderSkeleton: SFC = () => {
>
<div className="flux-schema--item no-hover">
<div className="flux-schema--expander" />
<div
className="flux-schema--item-skeleton"
style={{width: '160px'}}
/>
<div className="flux-schema--item-skeleton" style={randomSize()} />
</div>
</div>
<div className="flux-schema-tree flux-schema--child">
<div className="flux-schema--item no-hover">
<div className="flux-schema--expander" />
<div
className="flux-schema--item-skeleton"
style={{width: '200px'}}
/>
<div className="flux-schema--item-skeleton" style={randomSize()} />
</div>
</div>
<div className="flux-schema-tree flux-schema--child">
<div className="flux-schema--item no-hover">
<div className="flux-schema--expander" />
<div
className="flux-schema--item-skeleton"
style={{width: '120px'}}
/>
<div className="flux-schema--item-skeleton" style={randomSize()} />
</div>
</div>
</>