LoadingHome.jsx
1 import React from 'react' 2 import ContentLoader from 'react-content-loader' 3 import styles from './LoadingHome.module.scss' 4 5 const MobileLoader = () => ( 6 <ContentLoader width={320} height={635}> 7 <rect x="30" y="60" rx="5" ry="5" width="220" height="120" /> 8 <rect x="270" y="60" rx="5" ry="5" width="220" height="120" /> 9 10 <circle cx="50" cy="210" r="20" /> 11 <rect x="80" y="190" rx="5" ry="5" width="170" height="40" /> 12 <circle cx="290" cy="210" r="20" /> 13 <rect x="320" y="190" rx="5" ry="5" width="170" height="40" /> 14 15 <rect x="15" y="275" rx="5" ry="5" width="90" height="110" /> 16 <rect x="113" y="275" rx="5" ry="5" width="90" height="110" /> 17 <rect x="211" y="275" rx="5" ry="5" width="90" height="110" /> 18 19 <rect x="15" y="392" rx="5" ry="5" width="90" height="110" /> 20 <rect x="113" y="392" rx="5" ry="5" width="90" height="110" /> 21 <rect x="211" y="392" rx="5" ry="5" width="90" height="110" /> 22 23 <rect x="15" y="510" rx="5" ry="5" width="90" height="110" /> 24 25 <circle cx="35" cy="716" r="20" /> 26 <rect x="70" y="692" rx="5" ry="5" width="235" height="88" /> 27 28 <circle cx="35" cy="816" r="20" /> 29 <rect x="70" y="792" rx="5" ry="5" width="235" height="88" /> 30 </ContentLoader> 31 ) 32 33 const DesktopLoader = () => ( 34 <ContentLoader width={1700} height={2000}> 35 <rect x="30" y="30" rx="5" ry="5" width="450" height="220" /> 36 <rect x="570" y="30" rx="5" ry="5" width="450" height="220" /> 37 <rect x="1100" y="30" rx="5" ry="5" width="450" height="220" /> 38 39 <circle cx="50" cy="310" r="20" /> 40 <rect x="80" y="290" rx="5" ry="5" width="370" height="80" /> 41 <circle cx="620" cy="310" r="20" /> 42 <rect x="650" y="290" rx="5" ry="5" width="370" height="80" /> 43 <circle cx="1150" cy="310" r="20" /> 44 <rect x="1180" y="290" rx="5" ry="5" width="370" height="80" /> 45 46 <rect x="15" y="380" rx="5" ry="5" width="200" height="85" /> 47 <rect x="223" y="380" rx="5" ry="5" width="200" height="85" /> 48 <rect x="431" y="380" rx="5" ry="5" width="200" height="85" /> 49 <rect x="639" y="380" rx="5" ry="5" width="200" height="85" /> 50 <rect x="847" y="380" rx="5" ry="5" width="200" height="85" /> 51 <rect x="1055" y="380" rx="5" ry="5" width="200" height="85" /> 52 <rect x="1263" y="380" rx="5" ry="5" width="200" height="85" /> 53 54 <circle cx="35" cy="570" r="20" /> 55 <rect x="70" y="550" rx="5" ry="5" width="325" height="88" /> 56 <circle cx="455" cy="570" r="20" /> 57 <rect x="500" y="550" rx="5" ry="5" width="325" height="88" /> 58 <circle cx="885" cy="570" r="20" /> 59 <rect x="920" y="550" rx="5" ry="5" width="325" height="88" /> 60 <circle cx="1305" cy="570" r="20" /> 61 <rect x="1340" y="550" rx="5" ry="5" width="325" height="88" /> 62 63 <circle cx="35" cy="698" r="20" /> 64 <rect x="70" y="678" rx="5" ry="5" width="325" height="88" /> 65 <circle cx="455" cy="698" r="20" /> 66 <rect x="500" y="678" rx="5" ry="5" width="325" height="88" /> 67 <circle cx="885" cy="698" r="20" /> 68 <rect x="920" y="678" rx="5" ry="5" width="325" height="88" /> 69 <circle cx="1305" cy="698" r="20" /> 70 <rect x="1340" y="678" rx="5" ry="5" width="325" height="88" /> 71 72 <circle cx="35" cy="826" r="20" /> 73 <rect x="70" y="806" rx="5" ry="5" width="325" height="88" /> 74 <circle cx="455" cy="826" r="20" /> 75 <rect x="500" y="806" rx="5" ry="5" width="325" height="88" /> 76 <circle cx="885" cy="826" r="20" /> 77 <rect x="920" y="806" rx="5" ry="5" width="325" height="88" /> 78 <circle cx="1305" cy="826" r="20" /> 79 <rect x="1340" y="806" rx="5" ry="5" width="325" height="88" /> 80 81 <circle cx="35" cy="954" r="20" /> 82 <rect x="70" y="934" rx="5" ry="5" width="325" height="88" /> 83 <circle cx="455" cy="954" r="20" /> 84 <rect x="500" y="934" rx="5" ry="5" width="325" height="88" /> 85 <circle cx="885" cy="954" r="20" /> 86 <rect x="920" y="934" rx="5" ry="5" width="325" height="88" /> 87 <circle cx="1305" cy="954" r="20" /> 88 <rect x="1340" y="934" rx="5" ry="5" width="325" height="88" /> 89 90 <circle cx="35" cy="1082" r="20" /> 91 <rect x="70" y="1062" rx="5" ry="5" width="325" height="88" /> 92 <circle cx="455" cy="1082" r="20" /> 93 <rect x="500" y="1062" rx="5" ry="5" width="325" height="88" /> 94 <circle cx="885" cy="1082" r="20" /> 95 <rect x="920" y="1062" rx="5" ry="5" width="325" height="88" /> 96 <circle cx="1305" cy="1082" r="20" /> 97 <rect x="1340" y="1062" rx="5" ry="5" width="325" height="88" /> 98 99 <circle cx="35" cy="1210" r="20" /> 100 <rect x="70" y="1190" rx="5" ry="5" width="325" height="88" /> 101 <circle cx="455" cy="1210" r="20" /> 102 <rect x="500" y="1190" rx="5" ry="5" width="325" height="88" /> 103 <circle cx="885" cy="1210" r="20" /> 104 <rect x="920" y="1190" rx="5" ry="5" width="325" height="88" /> 105 <circle cx="1305" cy="1210" r="20" /> 106 <rect x="1340" y="1190" rx="5" ry="5" width="325" height="88" /> 107 108 <circle cx="35" cy="1338" r="20" /> 109 <rect x="70" y="1318" rx="5" ry="5" width="325" height="88" /> 110 <circle cx="455" cy="1338" r="20" /> 111 <rect x="500" y="1318" rx="5" ry="5" width="325" height="88" /> 112 <circle cx="885" cy="1338" r="20" /> 113 <rect x="920" y="1318" rx="5" ry="5" width="325" height="88" /> 114 <circle cx="1305" cy="1338" r="20" /> 115 <rect x="1340" y="1318" rx="5" ry="5" width="325" height="88" /> 116 117 <circle cx="35" cy="1366" r="20" /> 118 <rect x="70" y="1346" rx="5" ry="5" width="325" height="88" /> 119 <circle cx="455" cy="1366" r="20" /> 120 <rect x="500" y="1346" rx="5" ry="5" width="325" height="88" /> 121 <circle cx="885" cy="1366" r="20" /> 122 <rect x="920" y="1346" rx="5" ry="5" width="325" height="88" /> 123 <circle cx="1305" cy="1366" r="20" /> 124 <rect x="1340" y="1346" rx="5" ry="5" width="325" height="88" /> 125 </ContentLoader> 126 ) 127 128 const LoadingHome = () => ( 129 <> 130 <div className={styles.mobile}> 131 <MobileLoader /> 132 </div> 133 <div className={styles.desktop}> 134 <DesktopLoader /> 135 </div> 136 </> 137 ) 138 139 export default LoadingHome