1
1
import React from 'react'
2
2
import PropTypes from 'prop-types'
3
- import Masonry from 'react-masonry-component'
4
3
import R from 'ramda'
5
4
import { withTheme } from 'styled-components'
6
5
7
- // import Loading, { Rect, Circle } from 'react-content-loader'
8
6
import ContentLoader from 'react-content-loader'
9
7
8
+ import { Wrapper , CheatsheetCard } from './styles'
9
+
10
10
import { makeDebugger , uid } from '../../utils'
11
11
/* eslint-disable no-unused-vars */
12
12
const debug = makeDebugger ( 'c:LoadingEffects:index' )
13
13
/* eslint-enable no-unused-vars */
14
14
15
- /* eslint-disable no-unused-vars */
16
15
const LoadingBlock = ( { theme} ) => (
17
- /* eslint-enable no-unused-vars */
18
-
19
- < div style = { { width :'45%' , overflow :'hidden' , marginTop :20 , height :180 } } >
16
+ < CheatsheetCard >
20
17
< ContentLoader
21
18
height = { 200 }
22
19
width = { 280 }
23
20
speed = { 2 }
24
- primaryColor = "#f3f3f3"
25
- secondaryColor = "#ecebeb"
21
+ primaryColor = { theme . loading . basic }
22
+ secondaryColor = { theme . loading . animate }
26
23
>
27
24
< rect x = "0" y = "0" rx = "3" ry = "3" width = "70" height = "10" />
28
25
< rect x = "80" y = "0" rx = "3" ry = "3" width = "100" height = "10" />
@@ -34,15 +31,15 @@ const LoadingBlock = ({ theme }) => (
34
31
< rect x = "185" y = "40" rx = "3" ry = "3" width = "60" height = "10" />
35
32
< rect x = "0" y = "60" rx = "3" ry = "3" width = "30" height = "10" />
36
33
</ ContentLoader >
37
- </ div >
34
+ </ CheatsheetCard >
38
35
)
39
36
40
37
const CheatSheetLoading = ( { column, theme} ) => (
41
- < Masonry >
38
+ < Wrapper >
42
39
{ R . range ( 0 , column ) . map ( ( ) => (
43
40
< LoadingBlock key = { uid . gen ( ) } theme = { theme } />
44
41
) ) }
45
- </ Masonry >
42
+ </ Wrapper >
46
43
)
47
44
48
45
CheatSheetLoading . propTypes = {