forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Add loading spinners to lightbox views (close #38)
+35
-2
+18
-1
src/view/com/lightbox/Images.tsx
+18
-1
src/view/com/lightbox/Images.tsx
···
1
1
import React from 'react'
2
-
import {Image, StyleSheet, useWindowDimensions, View} from 'react-native'
2
+
import {
3
+
ActivityIndicator,
4
+
Image,
5
+
StyleSheet,
6
+
useWindowDimensions,
7
+
View,
8
+
} from 'react-native'
3
9
4
10
export function Component({
5
11
uris,
···
12
18
}) {
13
19
const winDim = useWindowDimensions()
14
20
const left = index * winDim.width * -1
21
+
const spinnerStyle = React.useMemo(
22
+
() => ({
23
+
left: winDim.width / 2 - 20,
24
+
top: winDim.height / 2 - 50,
25
+
}),
26
+
[winDim.width, winDim.height],
27
+
)
15
28
return (
16
29
<View style={[styles.container, {left}]}>
30
+
<ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
17
31
{uris.map((uri, i) => (
18
32
<Image
19
33
key={i}
···
35
49
top: 0,
36
50
left: 0,
37
51
width: '100%',
52
+
},
53
+
loading: {
54
+
position: 'absolute',
38
55
},
39
56
image: {
40
57
position: 'absolute',
+17
-1
src/view/com/lightbox/ProfileImage.tsx
+17
-1
src/view/com/lightbox/ProfileImage.tsx
···
1
1
import React from 'react'
2
-
import {StyleSheet, useWindowDimensions, View} from 'react-native'
2
+
import {
3
+
ActivityIndicator,
4
+
StyleSheet,
5
+
useWindowDimensions,
6
+
View,
7
+
} from 'react-native'
3
8
import {UserAvatar} from '../util/UserAvatar'
4
9
import {ProfileViewModel} from '../../../state/models/profile-view'
5
10
6
11
export function Component({profileView}: {profileView: ProfileViewModel}) {
7
12
const winDim = useWindowDimensions()
8
13
const top = winDim.height / 2 - (winDim.width - 40) / 2 - 100
14
+
const spinnerStyle = React.useMemo(
15
+
() => ({
16
+
left: winDim.width / 2 - 30,
17
+
top: winDim.height / 2 - (winDim.width - 40) / 2 - 80,
18
+
}),
19
+
[winDim.width, winDim.height],
20
+
)
9
21
return (
10
22
<View style={[styles.container, {top}]}>
23
+
<ActivityIndicator style={[styles.loading, spinnerStyle]} size="large" />
11
24
<UserAvatar
12
25
handle={profileView.handle}
13
26
displayName={profileView.displayName}
···
22
35
container: {
23
36
position: 'absolute',
24
37
left: 20,
38
+
},
39
+
loading: {
40
+
position: 'absolute',
25
41
},
26
42
})