lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
1import React from 'react'
2import {StyleSheet, StyleProp, View, ViewStyle} from 'react-native'
3import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
4import {HeartIcon} from 'lib/icons'
5import {s} from 'lib/styles'
6import {useTheme} from 'lib/ThemeContext'
7import {usePalette} from 'lib/hooks/usePalette'
8
9export function LoadingPlaceholder({
10 width,
11 height,
12 style,
13}: {
14 width: string | number
15 height: string | number
16 style?: StyleProp<ViewStyle>
17}) {
18 const theme = useTheme()
19 return (
20 <View
21 style={[
22 styles.loadingPlaceholder,
23 {
24 width,
25 height,
26 backgroundColor: theme.palette.default.backgroundLight,
27 },
28 style,
29 ]}
30 />
31 )
32}
33
34export function PostLoadingPlaceholder({
35 style,
36}: {
37 style?: StyleProp<ViewStyle>
38}) {
39 const theme = useTheme()
40 const pal = usePalette('default')
41 return (
42 <View style={[styles.post, pal.view, style]}>
43 <LoadingPlaceholder width={52} height={52} style={styles.avatar} />
44 <View style={[s.flex1]}>
45 <LoadingPlaceholder width={100} height={8} style={[s.mb10]} />
46 <LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
47 <LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
48 <LoadingPlaceholder width={120} height={8} style={[s.mb10]} />
49 <View style={s.flexRow}>
50 <View style={s.flex1}>
51 <FontAwesomeIcon
52 style={{color: theme.palette.default.icon}}
53 icon={['far', 'comment']}
54 size={14}
55 />
56 </View>
57 <View style={s.flex1}>
58 <FontAwesomeIcon
59 style={{color: theme.palette.default.icon}}
60 icon="retweet"
61 size={18}
62 />
63 </View>
64 <View style={s.flex1}>
65 <HeartIcon
66 style={{color: theme.palette.default.icon} as ViewStyle}
67 size={17}
68 strokeWidth={1.7}
69 />
70 </View>
71 <View style={s.flex1} />
72 </View>
73 </View>
74 </View>
75 )
76}
77
78export function PostFeedLoadingPlaceholder() {
79 return (
80 <>
81 <PostLoadingPlaceholder />
82 <PostLoadingPlaceholder />
83 <PostLoadingPlaceholder />
84 <PostLoadingPlaceholder />
85 <PostLoadingPlaceholder />
86 <PostLoadingPlaceholder />
87 <PostLoadingPlaceholder />
88 <PostLoadingPlaceholder />
89 <PostLoadingPlaceholder />
90 <PostLoadingPlaceholder />
91 <PostLoadingPlaceholder />
92 </>
93 )
94}
95
96export function NotificationLoadingPlaceholder({
97 style,
98}: {
99 style?: StyleProp<ViewStyle>
100}) {
101 const pal = usePalette('default')
102 return (
103 <View style={[styles.notification, pal.view, style]}>
104 <View style={[s.flexRow, s.mb10]}>
105 <LoadingPlaceholder width={30} height={30} style={styles.smallAvatar} />
106 </View>
107 <LoadingPlaceholder width={200} height={8} style={[s.mb5]} />
108 <LoadingPlaceholder width={120} height={8} style={[s.mb5]} />
109 </View>
110 )
111}
112
113export function NotificationFeedLoadingPlaceholder() {
114 return (
115 <>
116 <NotificationLoadingPlaceholder />
117 <NotificationLoadingPlaceholder />
118 <NotificationLoadingPlaceholder />
119 <NotificationLoadingPlaceholder />
120 <NotificationLoadingPlaceholder />
121 <NotificationLoadingPlaceholder />
122 <NotificationLoadingPlaceholder />
123 <NotificationLoadingPlaceholder />
124 <NotificationLoadingPlaceholder />
125 <NotificationLoadingPlaceholder />
126 <NotificationLoadingPlaceholder />
127 </>
128 )
129}
130
131export function ProfileCardLoadingPlaceholder({
132 style,
133}: {
134 style?: StyleProp<ViewStyle>
135}) {
136 const pal = usePalette('default')
137 return (
138 <View style={[styles.profileCard, pal.view, style]}>
139 <LoadingPlaceholder
140 width={40}
141 height={40}
142 style={styles.profileCardAvi}
143 />
144 <View>
145 <LoadingPlaceholder width={140} height={8} style={[s.mb5]} />
146 <LoadingPlaceholder width={120} height={8} style={[s.mb10]} />
147 <LoadingPlaceholder width={220} height={8} style={[s.mb5]} />
148 </View>
149 </View>
150 )
151}
152
153export function ProfileCardFeedLoadingPlaceholder() {
154 return (
155 <>
156 <ProfileCardLoadingPlaceholder />
157 <ProfileCardLoadingPlaceholder />
158 <ProfileCardLoadingPlaceholder />
159 <ProfileCardLoadingPlaceholder />
160 <ProfileCardLoadingPlaceholder />
161 <ProfileCardLoadingPlaceholder />
162 <ProfileCardLoadingPlaceholder />
163 <ProfileCardLoadingPlaceholder />
164 <ProfileCardLoadingPlaceholder />
165 <ProfileCardLoadingPlaceholder />
166 <ProfileCardLoadingPlaceholder />
167 </>
168 )
169}
170
171const styles = StyleSheet.create({
172 loadingPlaceholder: {
173 borderRadius: 6,
174 },
175 post: {
176 flexDirection: 'row',
177 padding: 10,
178 margin: 1,
179 },
180 avatar: {
181 borderRadius: 26,
182 marginRight: 10,
183 marginLeft: 6,
184 },
185 notification: {
186 padding: 10,
187 paddingLeft: 46,
188 margin: 1,
189 },
190 profileCard: {
191 flexDirection: 'row',
192 padding: 10,
193 margin: 1,
194 },
195 profileCardAvi: {
196 borderRadius: 20,
197 marginRight: 10,
198 },
199 smallAvatar: {
200 borderRadius: 15,
201 marginRight: 10,
202 },
203})