Improve textinput performance in login and account creation (#4673)

* Change login form to use uncontrolled inputs * Debounce state updates in account creation to reduce flicker * Refactor state-control of account creation forms to fix perf without relying on debounces * Remove canNext and enforce is13 * Re-add live validation to signup form (#4720) * Update validation in real time * Disable on invalid * Clear server error on typing * Remove unnecessary clearing of error --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
2024-07-02 14:43:34 -07:00
parent 4bb4452f08
commit 63bb8fda2d
7 changed files with 357 additions and 269 deletions
@@ -0,0 +1,73 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Loader} from '#/components/Loader'
+
+export interface BackNextButtonsProps {
+  hideNext?: boolean
+  showRetry?: boolean
+  isLoading: boolean
+  isNextDisabled?: boolean
+  onBackPress: () => void
+  onNextPress?: () => void
+  onRetryPress?: () => void
+}
+
+export function BackNextButtons({
+  hideNext,
+  showRetry,
+  isLoading,
+  isNextDisabled,
+  onBackPress,
+  onNextPress,
+  onRetryPress,
+}: BackNextButtonsProps) {
+  const {_} = useLingui()
+
+  return (
+    <View style={[a.flex_row, a.justify_between, a.pb_lg, a.pt_3xl]}>
+      <Button
+        label={_(msg`Go back to previous step`)}
+        variant="solid"
+        color="secondary"
+        size="medium"
+        onPress={onBackPress}>
+        <ButtonText>
+          <Trans>Back</Trans>
+        </ButtonText>
+      </Button>
+      {!hideNext &&
+        (showRetry ? (
+          <Button
+            label={_(msg`Press to retry`)}
+            variant="solid"
+            color="primary"
+            size="medium"
+            onPress={onRetryPress}>
+            <ButtonText>
+              <Trans>Retry</Trans>
+            </ButtonText>
+            {isLoading && <ButtonIcon icon={Loader} />}
+          </Button>
+        ) : (
+          <Button
+            testID="nextBtn"
+            label={_(msg`Continue to next step`)}
+            variant="solid"
+            color="primary"
+            size="medium"
+            disabled={isLoading || isNextDisabled}
+            onPress={onNextPress}>
+            <ButtonText>
+              <Trans>Next</Trans>
+            </ButtonText>
+            {isLoading && <ButtonIcon icon={Loader} />}
+          </Button>
+        ))}
+    </View>
+  )
+}