Skip to content

Commit bf7fce4

Browse files
brunolemosbrunolemos
committed
[Performance] Only use react-spring when necessary, use new themed components everywhere else
#126 pmndrs/react-spring#570 (comment)
1 parent 7c31a59 commit bf7fce4

File tree

84 files changed

+1598
-1637
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+1598
-1637
lines changed

‎packages/components/src/components/animated/spring/SpringAnimatedSafeAreaView.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import { ViewProps } from 'react-native'
33
import { SafeAreaView } from '../../../libs/safe-area-view'
44
import { createSpringAnimatedComponent } from './helpers'
55

6+
export interface SpringAnimatedSafeAreaViewProps extends ViewProps {}
7+
68
export const SpringAnimatedSafeAreaView = createSpringAnimatedComponent(
79
SafeAreaView,
810
)
911

10-
export interface SpringAnimatedSafeAreaViewProps extends ViewProps {}
12+
export type SpringAnimatedSafeAreaView = SafeAreaView

‎packages/components/src/components/animated/spring/SpringAnimatedTextInput.tsx

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎packages/components/src/components/buttons/GitHubLoginButton.tsx

Lines changed: 36 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,20 @@
1-
import { rgba } from 'polished'
2-
import React, { useCallback, useRef } from 'react'
1+
import React from 'react'
32
import { StyleSheet, TextProps, View } from 'react-native'
4-
import { useSpring } from 'react-spring/native'
53

64
import { GitHubIcon, Omit } from '@devhub/core'
7-
import { useCSSVariablesOrSpringAnimatedTheme } from '../../hooks/use-css-variables-or-spring--animated-theme'
8-
import { useHover } from '../../hooks/use-hover'
9-
import { Platform } from '../../libs/platform'
105
import { contentPadding } from '../../styles/variables'
11-
import { getDefaultReactSpringAnimationConfig } from '../../utils/helpers/animations'
12-
import { SpringAnimatedActivityIndicator } from '../animated/spring/SpringAnimatedActivityIndicator'
13-
import { SpringAnimatedIcon } from '../animated/spring/SpringAnimatedIcon'
14-
import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
15-
import {
16-
SpringAnimatedTouchableOpacity,
17-
SpringAnimatedTouchableOpacityProps,
18-
} from '../animated/spring/SpringAnimatedTouchableOpacity'
19-
import { SpringAnimatedView } from '../animated/spring/SpringAnimatedView'
20-
import { useTheme } from '../context/ThemeContext'
6+
import { Button, ButtonProps } from '../common/Button'
7+
import { ThemedActivityIndicator } from '../themed/ThemedActivityIndicator'
8+
import { ThemedIcon } from '../themed/ThemedIcon'
9+
import { ThemedText } from '../themed/ThemedText'
10+
import { ThemedView } from '../themed/ThemedView'
2111

2212
export interface GitHubLoginButtonProps
23-
extends Omit<SpringAnimatedTouchableOpacityProps, 'children'> {
13+
extends Omit<ButtonProps, 'children' | 'onPress'> {
2414
horizontal?: boolean
2515
leftIcon?: GitHubIcon
2616
loading?: boolean
17+
onPress: () => void
2718
rightIcon?: GitHubIcon
2819
subtitle?: string
2920
subtitleProps?: TextProps
@@ -33,16 +24,13 @@ export interface GitHubLoginButtonProps
3324

3425
const styles = StyleSheet.create({
3526
button: {
36-
height: 58,
37-
borderRadius: 58 / 2,
27+
width: '100%',
3828
overflow: 'hidden',
3929
},
4030

4131
contentContainer: {
4232
flex: 1,
4333
flexDirection: 'row',
44-
height: 58,
45-
borderRadius: 58 / 2,
4634
overflow: 'hidden',
4735
},
4836

@@ -57,8 +45,8 @@ const styles = StyleSheet.create({
5745
},
5846

5947
mainContentContainer: {
60-
alignItems: 'flex-start',
6148
flex: 1,
49+
alignItems: 'flex-start',
6250
justifyContent: 'center',
6351
paddingHorizontal: contentPadding,
6452
},
@@ -90,157 +78,65 @@ export function GitHubLoginButton(props: GitHubLoginButtonProps) {
9078
...otherProps
9179
} = props
9280

93-
const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
94-
95-
const getStyles = useCallback(() => {
96-
const { isHovered, isPressing, theme } = cacheRef.current
97-
98-
const immediate = isHovered || Platform.realOS === 'android'
99-
100-
return {
101-
config: getDefaultReactSpringAnimationConfig(),
102-
immediate,
103-
backgroundColor:
104-
isHovered || isPressing
105-
? theme.backgroundColorLess2
106-
: rgba(theme.backgroundColorLess2, 0),
107-
}
108-
}, [])
109-
110-
const updateStyles = useCallback(() => {
111-
setSpringAnimatedStyles(getStyles())
112-
}, [getStyles])
113-
114-
const initialTheme = useTheme(
115-
useCallback(
116-
theme => {
117-
if (cacheRef.current.theme === theme) return
118-
cacheRef.current.theme = theme
119-
updateStyles()
120-
},
121-
[updateStyles],
122-
),
123-
)
124-
125-
const touchableRef = useRef(null)
126-
const initialIsHovered = useHover(touchableRef, isHovered => {
127-
cacheRef.current.isHovered = isHovered
128-
updateStyles()
129-
})
130-
131-
const cacheRef = useRef({
132-
isHovered: initialIsHovered,
133-
isPressing: false,
134-
theme: initialTheme,
135-
})
136-
cacheRef.current.theme = initialTheme
137-
138-
const [springAnimatedStyles, setSpringAnimatedStyles] = useSpring<
139-
ReturnType<typeof getStyles>
140-
>(getStyles)
141-
14281
return (
143-
<SpringAnimatedTouchableOpacity
144-
ref={touchableRef}
145-
activeOpacity={0.8}
82+
<Button
83+
size={58}
14684
{...otherProps}
147-
onPressIn={() => {
148-
if (Platform.realOS === 'web') return
149-
150-
cacheRef.current.isPressing = true
151-
updateStyles()
152-
}}
153-
onPressOut={() => {
154-
if (Platform.realOS === 'web') return
155-
156-
cacheRef.current.isPressing = false
157-
updateStyles()
158-
}}
159-
style={[
160-
styles.button,
161-
{
162-
backgroundColor: springAnimatedTheme.backgroundColorLess1,
163-
},
164-
props.style,
165-
]}
85+
style={styles.button}
86+
contentContainerStyle={styles.contentContainer}
16687
>
167-
<SpringAnimatedView
168-
style={[styles.contentContainer, springAnimatedStyles]}
169-
>
88+
<>
17089
{!!leftIcon && (
171-
<SpringAnimatedView
172-
style={[
173-
styles.iconWrapper,
174-
{
175-
borderColor: springAnimatedTheme.foregroundColor,
176-
paddingLeft: contentPadding,
177-
},
178-
]}
90+
<ThemedView
91+
borderColor="foregroundColor"
92+
style={[styles.iconWrapper, { paddingLeft: contentPadding }]}
17993
>
180-
<SpringAnimatedIcon
94+
<ThemedIcon
18195
name={leftIcon}
182-
style={[
183-
styles.icon,
184-
{ color: springAnimatedTheme.foregroundColor },
185-
]}
96+
style={styles.icon}
97+
color="foregroundColor"
18698
/>
187-
</SpringAnimatedView>
99+
</ThemedView>
188100
)}
189101

190102
<View style={styles.mainContentContainer}>
191103
{!!title && (
192-
<SpringAnimatedText
104+
<ThemedText
105+
color="foregroundColor"
193106
{...textProps}
194-
style={[
195-
styles.title,
196-
{
197-
color: springAnimatedTheme.foregroundColor,
198-
},
199-
textProps.style,
200-
]}
107+
style={[styles.title, textProps.style]}
201108
>
202109
{title}
203-
</SpringAnimatedText>
110+
</ThemedText>
204111
)}
205112

206113
{!!subtitle && (
207-
<SpringAnimatedText
114+
<ThemedText
115+
color="foregroundColorMuted50"
208116
{...subtitleProps}
209-
style={[
210-
styles.subtitleText,
211-
{
212-
color: springAnimatedTheme.foregroundColorMuted50,
213-
},
214-
subtitleProps.style,
215-
]}
117+
style={[styles.subtitleText, subtitleProps.style]}
216118
>
217119
{subtitle}
218-
</SpringAnimatedText>
120+
</ThemedText>
219121
)}
220122
</View>
221123

222124
{!!(rightIcon || loading) && (
223125
<View style={[styles.iconWrapper, { paddingRight: contentPadding }]}>
224126
{loading ? (
225-
<SpringAnimatedActivityIndicator
226-
color={springAnimatedTheme.foregroundColor as any}
227-
/>
127+
<ThemedActivityIndicator color="foregroundColor" />
228128
) : (
229129
!!rightIcon && (
230-
<SpringAnimatedIcon
130+
<ThemedIcon
131+
color="foregroundColor"
231132
name={rightIcon}
232-
style={[
233-
styles.icon,
234-
{
235-
color: springAnimatedTheme.foregroundColor,
236-
},
237-
]}
133+
style={styles.icon}
238134
/>
239135
)
240136
)}
241137
</View>
242138
)}
243-
</SpringAnimatedView>
244-
</SpringAnimatedTouchableOpacity>
139+
</>
140+
</Button>
245141
)
246142
}

‎packages/components/src/components/cards/EmptyCards.tsx

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react'
2-
import { Image, Text, TextStyle, View, ViewStyle } from 'react-native'
2+
import { Image, Text, View, ViewStyle } from 'react-native'
33

44
import { EnhancedLoadState } from '@devhub/core'
5-
import { useCSSVariablesOrSpringAnimatedTheme } from '../../hooks/use-css-variables-or-spring--animated-theme'
65
import { useReduxAction } from '../../hooks/use-redux-action'
76
import * as actions from '../../redux/actions'
87
import { sharedStyles } from '../../styles/shared'
@@ -11,13 +10,13 @@ import {
1110
getEmojiImageURL,
1211
GitHubEmoji,
1312
} from '../../utils/helpers/github/emojis'
14-
import { SpringAnimatedActivityIndicator } from '../animated/spring/SpringAnimatedActivityIndicator'
15-
import { SpringAnimatedText } from '../animated/spring/SpringAnimatedText'
1613
import { Button, defaultButtonSize } from '../common/Button'
1714
import { fabSize } from '../common/FAB'
1815
import { Spacer } from '../common/Spacer'
1916
import { useAppLayout } from '../context/LayoutContext'
2017
import { fabSpacing, shouldRenderFAB } from '../layout/FABRenderer'
18+
import { ThemedActivityIndicator } from '../themed/ThemedActivityIndicator'
19+
import { ThemedText } from '../themed/ThemedText'
2120
import { GenericMessageWithButtonView } from './GenericMessageWithButtonView'
2221

2322
const clearMessages = [
@@ -75,7 +74,7 @@ export const EmptyCards = React.memo((props: EmptyCardsProps) => {
7574
} = props
7675

7776
const { sizename } = useAppLayout()
78-
const springAnimatedTheme = useCSSVariablesOrSpringAnimatedTheme()
77+
7978
const setColumnClearedAtFilter = useReduxAction(
8079
actions.setColumnClearedAtFilter,
8180
)
@@ -87,25 +86,14 @@ export const EmptyCards = React.memo((props: EmptyCardsProps) => {
8786
loadState === 'loading_first' ||
8887
(loadState === 'loading' && !refresh && !fetchNextPage)
8988
) {
90-
return (
91-
<SpringAnimatedActivityIndicator
92-
color={springAnimatedTheme.foregroundColor}
93-
/>
94-
)
89+
return <ThemedActivityIndicator color="foregroundColor" />
9590
}
9691

9792
const containerStyle: ViewStyle = {
9893
width: '100%',
9994
padding: contentPadding,
10095
}
10196

102-
const springAnimatedTextStyle = {
103-
lineHeight: 20,
104-
fontSize: 14,
105-
color: springAnimatedTheme.foregroundColorMuted50,
106-
textAlign: 'center',
107-
} as TextStyle
108-
10997
if (hasError) {
11098
return (
11199
<GenericMessageWithButtonView
@@ -129,7 +117,14 @@ export const EmptyCards = React.memo((props: EmptyCardsProps) => {
129117

130118
return (
131119
<View style={containerStyle}>
132-
<SpringAnimatedText style={springAnimatedTextStyle}>
120+
<ThemedText
121+
color="foregroundColorMuted50"
122+
style={{
123+
lineHeight: 20,
124+
fontSize: 14,
125+
textAlign: 'center',
126+
}}
127+
>
133128
{clearMessage}
134129
{!!randomEmojiImageURL && (
135130
<>
@@ -141,7 +136,7 @@ export const EmptyCards = React.memo((props: EmptyCardsProps) => {
141136
/>
142137
</>
143138
)}
144-
</SpringAnimatedText>
139+
</ThemedText>
145140
</View>
146141
)
147142
}

0 commit comments

Comments
 (0)