zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Show 'processing' spinner in edit profile modal

zio/stable
Paul Frazee 2022-12-08 16:08:15 -06:00
parent e73c7cee39
commit 356297cace
1 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/view/com/modals/EditProfile.tsx
View File

@ -1,7 +1,13 @@
import React, {useState} from 'react' import React, {useState} from 'react'
import {ComAtprotoBlobUpload} from '../../../third-party/api/index' import {ComAtprotoBlobUpload} from '../../../third-party/api/index'
import * as Toast from '../util/Toast' import * as Toast from '../util/Toast'
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native' import {
ActivityIndicator,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient' import LinearGradient from 'react-native-linear-gradient'
import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet' import {BottomSheetScrollView, BottomSheetTextInput} from '@gorhom/bottom-sheet'
import {Image as PickedImage} from 'react-native-image-crop-picker' import {Image as PickedImage} from 'react-native-image-crop-picker'
@ -28,6 +34,7 @@ export function Component({
}) { }) {
const store = useStores() const store = useStores()
const [error, setError] = useState<string>('') const [error, setError] = useState<string>('')
const [isProcessing, setProcessing] = useState<boolean>(false)
const [displayName, setDisplayName] = useState<string>( const [displayName, setDisplayName] = useState<string>(
profileView.displayName || '', profileView.displayName || '',
) )
@ -50,6 +57,7 @@ export function Component({
setUserAvatar(img.path) setUserAvatar(img.path)
} }
const onPressSave = async () => { const onPressSave = async () => {
setProcessing(true)
if (error) { if (error) {
setError('') setError('')
} }
@ -76,6 +84,7 @@ export function Component({
// ) // )
} }
} }
setProcessing(false)
} }
return ( return (
@ -122,15 +131,21 @@ export function Component({
onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))} onChangeText={v => setDescription(enforceLen(v, MAX_DESCRIPTION))}
/> />
</View> </View>
<TouchableOpacity style={s.mt10} onPress={onPressSave}> {isProcessing ? (
<LinearGradient <View style={[styles.btn, s.mt10, {backgroundColor: colors.gray2}]}>
colors={[gradients.primary.start, gradients.primary.end]} <ActivityIndicator />
start={{x: 0, y: 0}} </View>
end={{x: 1, y: 1}} ) : (
style={[styles.btn]}> <TouchableOpacity style={s.mt10} onPress={onPressSave}>
<Text style={[s.white, s.bold]}>Save Changes</Text> <LinearGradient
</LinearGradient> colors={[gradients.primary.start, gradients.primary.end]}
</TouchableOpacity> start={{x: 0, y: 0}}
end={{x: 1, y: 1}}
style={[styles.btn]}>
<Text style={[s.white, s.bold]}>Save Changes</Text>
</LinearGradient>
</TouchableOpacity>
)}
<TouchableOpacity style={s.mt5} onPress={onPressCancel}> <TouchableOpacity style={s.mt5} onPress={onPressCancel}>
<View style={[styles.btn]}> <View style={[styles.btn]}>
<Text style={[s.black, s.bold]}>Cancel</Text> <Text style={[s.black, s.bold]}>Cancel</Text>