mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix TagMenu initial render perf (#6483)

* Split tag menu dialog content

* Log the actual error please

* Fix it on native

authored by danabra.mov and committed by

GitHub 4f0f9eb4 1486e5cc

+165 -151
+1 -1
src/components/Dialog/index.tsx
··· 75 75 try { 76 76 cb() 77 77 } catch (e: any) { 78 - logger.error('Error running close callback', e) 78 + logger.error(e || 'Error running close callback') 79 79 } 80 80 } 81 81
+164 -150
src/components/TagMenu/index.tsx
··· 40 40 tag: string 41 41 authorHandle?: string 42 42 }>) { 43 + const navigation = useNavigation<NavigationProp>() 44 + return ( 45 + <> 46 + {children} 47 + <Dialog.Outer control={control}> 48 + <Dialog.Handle /> 49 + <TagMenuInner 50 + control={control} 51 + tag={tag} 52 + authorHandle={authorHandle} 53 + navigation={navigation} 54 + /> 55 + </Dialog.Outer> 56 + </> 57 + ) 58 + } 59 + 60 + function TagMenuInner({ 61 + control, 62 + tag, 63 + authorHandle, 64 + navigation, 65 + }: { 66 + control: Dialog.DialogOuterProps['control'] 67 + tag: string 68 + authorHandle?: string 69 + // Passed down because on native, we don't use real portals (and context would be wrong). 70 + navigation: NavigationProp 71 + }) { 43 72 const {_} = useLingui() 44 73 const t = useTheme() 45 - const navigation = useNavigation<NavigationProp>() 46 74 const {isLoading: isPreferencesLoading, data: preferences} = 47 75 usePreferencesQuery() 48 76 const { ··· 79 107 }, [tag, preferences?.moderationPrefs?.mutedWords]) 80 108 81 109 return ( 82 - <> 83 - {children} 84 - 85 - <Dialog.Outer control={control}> 86 - <Dialog.Handle /> 87 - <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}> 88 - {isPreferencesLoading ? ( 89 - <View style={[a.w_full, a.align_center]}> 90 - <Loader size="lg" /> 91 - </View> 92 - ) : ( 93 - <> 110 + <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}> 111 + {isPreferencesLoading ? ( 112 + <View style={[a.w_full, a.align_center]}> 113 + <Loader size="lg" /> 114 + </View> 115 + ) : ( 116 + <> 117 + <View 118 + style={[ 119 + a.rounded_md, 120 + a.border, 121 + a.mb_md, 122 + t.atoms.border_contrast_low, 123 + t.atoms.bg_contrast_25, 124 + ]}> 125 + <Link 126 + label={_(msg`View all posts with tag ${displayTag}`)} 127 + {...createStaticClick(() => { 128 + control.close(() => { 129 + navigation.push('Hashtag', { 130 + tag: encodeURIComponent(tag), 131 + }) 132 + }) 133 + })}> 94 134 <View 95 135 style={[ 96 - a.rounded_md, 97 - a.border, 98 - a.mb_md, 99 - t.atoms.border_contrast_low, 100 - t.atoms.bg_contrast_25, 136 + a.w_full, 137 + a.flex_row, 138 + a.align_center, 139 + a.justify_start, 140 + a.gap_md, 141 + a.px_lg, 142 + a.py_md, 101 143 ]}> 144 + <Search size="lg" style={[t.atoms.text_contrast_medium]} /> 145 + <Text 146 + numberOfLines={1} 147 + ellipsizeMode="middle" 148 + style={[ 149 + a.flex_1, 150 + a.text_md, 151 + a.font_bold, 152 + native({top: 2}), 153 + t.atoms.text_contrast_medium, 154 + ]}> 155 + <Trans> 156 + See{' '} 157 + <Text style={[a.text_md, a.font_bold, t.atoms.text]}> 158 + {displayTag} 159 + </Text>{' '} 160 + posts 161 + </Trans> 162 + </Text> 163 + </View> 164 + </Link> 165 + 166 + {authorHandle && !isInvalidHandle(authorHandle) && ( 167 + <> 168 + <Divider /> 169 + 102 170 <Link 103 - label={_(msg`View all posts with tag ${displayTag}`)} 171 + label={_( 172 + msg`View all posts by @${authorHandle} with tag ${displayTag}`, 173 + )} 104 174 {...createStaticClick(() => { 105 175 control.close(() => { 106 176 navigation.push('Hashtag', { 107 177 tag: encodeURIComponent(tag), 178 + author: authorHandle, 108 179 }) 109 180 }) 110 181 })}> ··· 118 189 a.px_lg, 119 190 a.py_md, 120 191 ]}> 121 - <Search size="lg" style={[t.atoms.text_contrast_medium]} /> 192 + <Person size="lg" style={[t.atoms.text_contrast_medium]} /> 122 193 <Text 123 194 numberOfLines={1} 124 195 ellipsizeMode="middle" ··· 134 205 <Text style={[a.text_md, a.font_bold, t.atoms.text]}> 135 206 {displayTag} 136 207 </Text>{' '} 137 - posts 208 + posts by this user 138 209 </Trans> 139 210 </Text> 140 211 </View> 141 212 </Link> 142 - 143 - {authorHandle && !isInvalidHandle(authorHandle) && ( 144 - <> 145 - <Divider /> 146 - 147 - <Link 148 - label={_( 149 - msg`View all posts by @${authorHandle} with tag ${displayTag}`, 150 - )} 151 - {...createStaticClick(() => { 152 - control.close(() => { 153 - navigation.push('Hashtag', { 154 - tag: encodeURIComponent(tag), 155 - author: authorHandle, 156 - }) 157 - }) 158 - })}> 159 - <View 160 - style={[ 161 - a.w_full, 162 - a.flex_row, 163 - a.align_center, 164 - a.justify_start, 165 - a.gap_md, 166 - a.px_lg, 167 - a.py_md, 168 - ]}> 169 - <Person 170 - size="lg" 171 - style={[t.atoms.text_contrast_medium]} 172 - /> 173 - <Text 174 - numberOfLines={1} 175 - ellipsizeMode="middle" 176 - style={[ 177 - a.flex_1, 178 - a.text_md, 179 - a.font_bold, 180 - native({top: 2}), 181 - t.atoms.text_contrast_medium, 182 - ]}> 183 - <Trans> 184 - See{' '} 185 - <Text 186 - style={[a.text_md, a.font_bold, t.atoms.text]}> 187 - {displayTag} 188 - </Text>{' '} 189 - posts by this user 190 - </Trans> 191 - </Text> 192 - </View> 193 - </Link> 194 - </> 195 - )} 213 + </> 214 + )} 196 215 197 - {preferences ? ( 198 - <> 199 - <Divider /> 216 + {preferences ? ( 217 + <> 218 + <Divider /> 200 219 201 - <Button 202 - label={ 203 - isMuted 204 - ? _(msg`Unmute all ${displayTag} posts`) 205 - : _(msg`Mute all ${displayTag} posts`) 220 + <Button 221 + label={ 222 + isMuted 223 + ? _(msg`Unmute all ${displayTag} posts`) 224 + : _(msg`Mute all ${displayTag} posts`) 225 + } 226 + onPress={() => { 227 + control.close(() => { 228 + if (isMuted) { 229 + resetUpsert() 230 + removeMutedWords(removeableMuteWords) 231 + } else { 232 + resetRemove() 233 + upsertMutedWord([ 234 + { 235 + value: tag, 236 + targets: ['tag'], 237 + actorTarget: 'all', 238 + }, 239 + ]) 206 240 } 207 - onPress={() => { 208 - control.close(() => { 209 - if (isMuted) { 210 - resetUpsert() 211 - removeMutedWords(removeableMuteWords) 212 - } else { 213 - resetRemove() 214 - upsertMutedWord([ 215 - { 216 - value: tag, 217 - targets: ['tag'], 218 - actorTarget: 'all', 219 - }, 220 - ]) 221 - } 222 - }) 223 - }}> 224 - <View 225 - style={[ 226 - a.w_full, 227 - a.flex_row, 228 - a.align_center, 229 - a.justify_start, 230 - a.gap_md, 231 - a.px_lg, 232 - a.py_md, 233 - ]}> 234 - <Mute 235 - size="lg" 236 - style={[t.atoms.text_contrast_medium]} 237 - /> 238 - <Text 239 - numberOfLines={1} 240 - ellipsizeMode="middle" 241 - style={[ 242 - a.flex_1, 243 - a.text_md, 244 - a.font_bold, 245 - native({top: 2}), 246 - t.atoms.text_contrast_medium, 247 - ]}> 248 - {isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '} 249 - <Text style={[a.text_md, a.font_bold, t.atoms.text]}> 250 - {displayTag} 251 - </Text>{' '} 252 - <Trans>posts</Trans> 253 - </Text> 254 - </View> 255 - </Button> 256 - </> 257 - ) : null} 258 - </View> 241 + }) 242 + }}> 243 + <View 244 + style={[ 245 + a.w_full, 246 + a.flex_row, 247 + a.align_center, 248 + a.justify_start, 249 + a.gap_md, 250 + a.px_lg, 251 + a.py_md, 252 + ]}> 253 + <Mute size="lg" style={[t.atoms.text_contrast_medium]} /> 254 + <Text 255 + numberOfLines={1} 256 + ellipsizeMode="middle" 257 + style={[ 258 + a.flex_1, 259 + a.text_md, 260 + a.font_bold, 261 + native({top: 2}), 262 + t.atoms.text_contrast_medium, 263 + ]}> 264 + {isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '} 265 + <Text style={[a.text_md, a.font_bold, t.atoms.text]}> 266 + {displayTag} 267 + </Text>{' '} 268 + <Trans>posts</Trans> 269 + </Text> 270 + </View> 271 + </Button> 272 + </> 273 + ) : null} 274 + </View> 259 275 260 - <Button 261 - label={_(msg`Close this dialog`)} 262 - size="small" 263 - variant="ghost" 264 - color="secondary" 265 - onPress={() => control.close()}> 266 - <ButtonText> 267 - <Trans>Cancel</Trans> 268 - </ButtonText> 269 - </Button> 270 - </> 271 - )} 272 - </Dialog.Inner> 273 - </Dialog.Outer> 274 - </> 276 + <Button 277 + label={_(msg`Close this dialog`)} 278 + size="small" 279 + variant="ghost" 280 + color="secondary" 281 + onPress={() => control.close()}> 282 + <ButtonText> 283 + <Trans>Cancel</Trans> 284 + </ButtonText> 285 + </Button> 286 + </> 287 + )} 288 + </Dialog.Inner> 275 289 ) 276 290 }