Skip to content

Commit bebf901

Browse files
rudyfraserrudyfraser
committed
Custom styling of activity notifications
1 parent 24a1ae3 commit bebf901

File tree

28 files changed

+129
-112
lines changed

28 files changed

+129
-112
lines changed

‎src/components/CustomActivityIndicator.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import {ActivityIndicator, type ColorValue} from 'react-native'
2+
3+
import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
4+
5+
export interface ActivityIndicatorProps extends ViewStyleProp {
6+
size?: 'small' | 'large' | number
7+
color?: string | ColorValue
8+
animating?: boolean
9+
hidesWhenStopped?: boolean
10+
}
11+
12+
export function CustomActivityIndicator({
13+
size = 'small',
14+
color,
15+
animating = true,
16+
hidesWhenStopped = true,
17+
style,
18+
}: ActivityIndicatorProps) {
19+
const t = useTheme()
20+
21+
return (
22+
<ActivityIndicator
23+
size={size}
24+
color={color || t.palette.primary_500}
25+
animating={animating}
26+
hidesWhenStopped={hidesWhenStopped}
27+
style={[a.align_center, a.justify_center, style]}
28+
/>
29+
)
30+
}

‎src/components/Post/Embed/ExternalEmbed/ExternalGif.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import React from 'react'
2-
import {
3-
ActivityIndicator,
4-
type GestureResponderEvent,
5-
Pressable,
6-
} from 'react-native'
2+
import {type GestureResponderEvent, Pressable} from 'react-native'
73
import {Image} from 'expo-image'
84
import {type AppBskyEmbedExternal} from '@atproto/api'
95
import {msg} from '@lingui/macro'
@@ -13,6 +9,7 @@ import {type EmbedPlayerParams} from '#/lib/strings/embed-player'
139
import {isIOS, isNative, isWeb} from '#/platform/detection'
1410
import {useExternalEmbedsPrefs} from '#/state/preferences'
1511
import {atoms as a, useTheme} from '#/alf'
12+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
1613
import {useDialogControl} from '#/components/Dialog'
1714
import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
1815
import {Fill} from '#/components/Fill'
@@ -141,7 +138,7 @@ export function ExternalGif({
141138
<PlayButtonIcon />
142139
) : (
143140
// Activity indicator while gif loads
144-
<ActivityIndicator size="large" color="white" />
141+
<CustomActivityIndicator size="large" color="white" />
145142
)}
146143
</Fill>
147144
)}

‎src/components/Post/Embed/ExternalEmbed/ExternalPlayer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react'
22
import {
3-
ActivityIndicator,
43
type GestureResponderEvent,
54
Pressable,
65
StyleSheet,
@@ -30,6 +29,7 @@ import {isNative} from '#/platform/detection'
3029
import {useExternalEmbedsPrefs} from '#/state/preferences'
3130
import {EventStopper} from '#/view/com/util/EventStopper'
3231
import {atoms as a, useTheme} from '#/alf'
32+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
3333
import {useDialogControl} from '#/components/Dialog'
3434
import {EmbedConsentDialog} from '#/components/dialogs/EmbedConsent'
3535
import {Fill} from '#/components/Fill'
@@ -65,7 +65,7 @@ function PlaceholderOverlay({
6565
{!isPlayerActive ? (
6666
<PlayButtonIcon />
6767
) : (
68-
<ActivityIndicator size="large" color="white" />
68+
<CustomActivityIndicator size="large" color="white" />
6969
)}
7070
</Pressable>
7171
</View>

‎src/components/Post/Embed/VideoEmbed/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {useCallback, useRef, useState} from 'react'
2-
import {ActivityIndicator, View} from 'react-native'
2+
import {View} from 'react-native'
33
import {ImageBackground} from 'expo-image'
44
import {type AppBskyEmbedVideo} from '@atproto/api'
55
import {msg, Trans} from '@lingui/macro'
@@ -9,6 +9,7 @@ import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
99
import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
1010
import {atoms as a, useTheme} from '#/alf'
1111
import {Button} from '#/components/Button'
12+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
1213
import {useThrottledValue} from '#/components/hooks/useThrottledValue'
1314
import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
1415
import {VideoEmbedInnerNative} from './VideoEmbedInner/VideoEmbedInnerNative'
@@ -138,7 +139,7 @@ function InnerWrapper({embed}: Props) {
138139
a.align_center,
139140
a.justify_center,
140141
]}>
141-
<ActivityIndicator size="large" color="white" />
142+
<CustomActivityIndicator size="large" color="white" />
142143
</View>
143144
) : (
144145
<PlayButtonIcon />

‎src/screens/Login/ForgotPasswordForm.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useState} from 'react'
2-
import {ActivityIndicator, Keyboard, View} from 'react-native'
2+
import {Keyboard, View} from 'react-native'
33
import {type ComAtprotoServerDescribeServer} from '@atproto/api'
44
import {msg, Trans} from '@lingui/macro'
55
import {useLingui} from '@lingui/react'
@@ -11,6 +11,7 @@ import {logger} from '#/logger'
1111
import {Agent} from '#/state/session/agent'
1212
import {atoms as a, useTheme} from '#/alf'
1313
import {Button, ButtonText} from '#/components/Button'
14+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
1415
import {FormError} from '#/components/forms/FormError'
1516
import {HostingProvider} from '#/components/forms/HostingProvider'
1617
import * as TextField from '#/components/forms/TextField'
@@ -131,7 +132,7 @@ export const ForgotPasswordForm = ({
131132
</Button>
132133
<View style={a.flex_1} />
133134
{!serviceDescription || isProcessing ? (
134-
<ActivityIndicator />
135+
<CustomActivityIndicator />
135136
) : (
136137
<Button
137138
label={_(msg`Next`)}

‎src/screens/Login/LoginForm.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import React, {useRef, useState} from 'react'
2-
import {
3-
ActivityIndicator,
4-
Keyboard,
5-
LayoutAnimation,
6-
type TextInput,
7-
View,
8-
} from 'react-native'
2+
import {Keyboard, LayoutAnimation, type TextInput, View} from 'react-native'
93
import {
104
ComAtprotoServerCreateSession,
115
type ComAtprotoServerDescribeServer,
@@ -23,6 +17,7 @@ import {useSessionApi} from '#/state/session'
2317
import {useLoggedOutViewControls} from '#/state/shell/logged-out'
2418
import {atoms as a, useTheme} from '#/alf'
2519
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
20+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
2621
import {FormError} from '#/components/forms/FormError'
2722
import {HostingProvider} from '#/components/forms/HostingProvider'
2823
import * as TextField from '#/components/forms/TextField'
@@ -332,7 +327,7 @@ export const LoginForm = ({
332327
</Button>
333328
) : !serviceDescription ? (
334329
<>
335-
<ActivityIndicator />
330+
<CustomActivityIndicator />
336331
<Text style={[t.atoms.text_contrast_high, a.pl_md]}>
337332
<Trans>Connecting...</Trans>
338333
</Text>

‎src/screens/Login/SetNewPasswordForm.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {useState} from 'react'
2-
import {ActivityIndicator, View} from 'react-native'
2+
import {View} from 'react-native'
33
import {msg, Trans} from '@lingui/macro'
44
import {useLingui} from '@lingui/react'
55

@@ -11,6 +11,7 @@ import {logger} from '#/logger'
1111
import {Agent} from '#/state/session/agent'
1212
import {atoms as a, useTheme} from '#/alf'
1313
import {Button, ButtonText} from '#/components/Button'
14+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
1415
import {FormError} from '#/components/forms/FormError'
1516
import * as TextField from '#/components/forms/TextField'
1617
import {Lock_Stroke2_Corner0_Rounded as Lock} from '#/components/icons/Lock'
@@ -176,7 +177,7 @@ export const SetNewPasswordForm = ({
176177
</Button>
177178
<View style={a.flex_1} />
178179
{isProcessing ? (
179-
<ActivityIndicator />
180+
<CustomActivityIndicator />
180181
) : (
181182
<Button
182183
label={_(msg`Next`)}

‎src/screens/Profile/Header/GrowableBanner.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import React, {useEffect, useState} from 'react'
1+
import {useEffect, useState} from 'react'
22
import {View} from 'react-native'
3-
import {ActivityIndicator} from 'react-native'
43
import Animated, {
54
Extrapolation,
65
interpolate,
76
runOnJS,
8-
SharedValue,
7+
type SharedValue,
98
useAnimatedProps,
109
useAnimatedReaction,
1110
useAnimatedStyle,
1211
} from 'react-native-reanimated'
1312
import {useSafeAreaInsets} from 'react-native-safe-area-context'
1413
import {BlurView} from 'expo-blur'
1514
import {useIsFetching} from '@tanstack/react-query'
15+
import type React from 'react'
1616

1717
import {isIOS} from '#/platform/detection'
1818
import {RQKEY_ROOT as STARTERPACK_RQKEY_ROOT} from '#/state/queries/actor-starter-packs'
@@ -21,6 +21,7 @@ import {RQKEY_ROOT as FEEDGEN_RQKEY_ROOT} from '#/state/queries/profile-feedgens
2121
import {RQKEY_ROOT as LIST_RQKEY_ROOT} from '#/state/queries/profile-lists'
2222
import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'
2323
import {atoms as a} from '#/alf'
24+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
2425

2526
const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
2627

@@ -139,7 +140,7 @@ function GrowableBannerInner({
139140
a.align_center,
140141
]}>
141142
<Animated.View style={[animatedSpinnerStyle]}>
142-
<ActivityIndicator
143+
<CustomActivityIndicator
143144
key={animateSpinner ? 'spin' : 'stop'}
144145
size="large"
145146
color="white"

‎src/screens/Search/SearchResults.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {memo, useCallback, useMemo, useState} from 'react'
2-
import {ActivityIndicator, View} from 'react-native'
2+
import {View} from 'react-native'
33
import {type AppBskyFeedDefs} from '@atproto/api'
44
import {msg, Trans} from '@lingui/macro'
55
import {useLingui} from '@lingui/react'
@@ -18,6 +18,7 @@ import {Post} from '#/view/com/post/Post'
1818
import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
1919
import {List} from '#/view/com/util/List'
2020
import {atoms as a, useTheme, web} from '#/alf'
21+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
2122
import * as FeedCard from '#/components/FeedCard'
2223
import * as Layout from '#/components/Layout'
2324
import {InlineLinkText} from '#/components/Link'
@@ -103,7 +104,7 @@ function Loader() {
103104
return (
104105
<Layout.Content>
105106
<View style={[a.py_xl]}>
106-
<ActivityIndicator />
107+
<CustomActivityIndicator />
107108
</View>
108109
</Layout.Content>
109110
)

‎src/screens/Search/components/AutocompleteResults.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {memo} from 'react'
2-
import {ActivityIndicator, View} from 'react-native'
2+
import {View} from 'react-native'
33
import {type AppBskyActorDefs} from '@atproto/api'
44
import {msg} from '@lingui/macro'
55
import {useLingui} from '@lingui/react'
@@ -9,6 +9,7 @@ import {useModerationOpts} from '#/state/preferences/moderation-opts'
99
import {SearchLinkCard} from '#/view/shell/desktop/Search'
1010
import {SearchProfileCard} from '#/screens/Search/components/SearchProfileCard'
1111
import {atoms as a, native} from '#/alf'
12+
import {CustomActivityIndicator} from '#/components/CustomActivityIndicator.tsx'
1213
import * as Layout from '#/components/Layout'
1314

1415
let AutocompleteResults = ({
@@ -34,7 +35,7 @@ let AutocompleteResults = ({
3435
!moderationOpts ? (
3536
<Layout.Content>
3637
<View style={[a.py_xl]}>
37-
<ActivityIndicator />
38+
<CustomActivityIndicator />
3839
</View>
3940
</Layout.Content>
4041
) : (

0 commit comments

Comments
 (0)