random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added loading placeholder components

Browse Source 
• Added:
- loading placeholder components

• Todo:
- Ensure responsiveness on all
This commit is contained in:
mgabdev
2020-07-28 15:06:45 -05:00
parent 0a719d8b6b
commit 26b7995f7d
11 changed files with 387 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/gabsocial/components/placeholder/trends_item_placeholder.js Normal file
View File

@@ -0,0 +1,31 @@
import { getRandomInt } from '../../utils/numbers'
import PlaceholderLayout from './placeholder_layout'
export default class TrendsItemPlaceholder extends PureComponent {
render() {
const title1Width = getRandomInt(280, 330)
const title2Width = getRandomInt(200, 305)
const title3Width = getRandomInt(100, 220)
const subtitle2Width = getRandomInt(140, 240)
const subtitle3Width = getRandomInt(120, 225)
return (
<div className={[_s.default, _s.px15, _s.py10, _s.pb5, _s.mb5].join(' ')}>
<PlaceholderLayout viewBox='0 0 340 138'>
<rect x='0' y='0' rx='3' ry='3' width={title1Width} height='12' />
<rect x='0' y='23' rx='3' ry='3' width={title2Width} height='12' />
<rect x='0' y='43' rx='3' ry='3' width={title3Width} height='12' />
<rect x='0' y='67' rx='3' ry='3' width='260' height='8' />
<rect x='0' y='85' rx='3' ry='3' width={subtitle2Width} height='8' />
<rect x='0' y='101' rx='3' ry='3' width={subtitle3Width} height='8' />
<rect x='0' y='120' rx='3' ry='3' width='20' height='8' />
<rect x='30' y='120' rx='3' ry='3' width='120' height='8' />
<rect x='160' y='120' rx='3' ry='3' width='20' height='8' />
</PlaceholderLayout>
</div>
)
}
}