eletrotupi / tcc/ commit / 0401453

frontend/ui: fade the confirm surface in faster

The system modal animation ran for about 300ms and began before the
card's content was laid out, so an empty frame flashed before the text
and buttons appeared

The fade is now driven in-app from zero opacity once the content is
mounted, which is quicker and drops the flash; the dismiss is now
instant as a result
Pedro Lucas Porcellis porcellis@eletrotupi.com · 24 days ago 04014530b375f804d5915e2e5f879a0663a8c709 Browse files
Parents 254c785
Changed files
1
Additions
+18
Deletions
-5
frontend/components/ui/ConfirmModal.tsx modified+18 -5
frontend/components/ui/ConfirmModal.tsx
1 - 
import React from 'react';
2 - 
import { Modal, Pressable, StyleSheet, View } from 'react-native';
1 + 
import React, { useEffect, useState } from 'react';
2 + 
import { Animated, Modal, Pressable, StyleSheet, View } from 'react-native';
3 3
4 4 
import { Button } from '@/components/ui/Button';
5 5 
import { Text } from '@/components/ui/Text';
6 6 
import {
7 7 
  BorderRadius,
36 36 
  loading = false,
37 37 
  onConfirm,
38 38 
  onCancel,
39 39 
  testID = 'confirm-modal',
40 40 
}) => {
41 + 
  const [fade] = useState(() => new Animated.Value(0));
42 +
43 + 
  useEffect(() => {
44 + 
    if (visible) {
45 + 
      fade.setValue(0);
46 + 
      Animated.timing(fade, {
47 + 
        toValue: 1,
48 + 
        duration: 180,
49 + 
        useNativeDriver: true,
50 + 
      }).start();
51 + 
    }
52 + 
  }, [visible, fade]);
53 +
41 54 
  const dismiss = () => {
42 55 
    if (!loading) {
43 56 
      onCancel();
44 57 
    }
45 58 
  };
46 59
47 60 
  return (
48 61 
    <Modal
49 62 
      visible={visible}
50 63 
      transparent
51 - 
      animationType="fade"
64 + 
      animationType="none"
52 65 
      statusBarTranslucent
53 66 
      onRequestClose={dismiss}
54 67 
    >
55 - 
      <View style={styles.overlay}>
68 + 
      <Animated.View style={[styles.overlay, { opacity: fade }]}>
56 69 
        <Pressable
57 70 
          style={StyleSheet.absoluteFill}
58 71 
          onPress={dismiss}
59 72 
          testID={`${testID}-overlay`}
60 73 
        />
93 106 
                testID={`${testID}-confirm`}
94 107 
              />
95 108 
            </View>
96 109 
          </Pressable>
97 110 
        </View>
98 - 
      </View>
111 + 
      </Animated.View>
99 112 
    </Modal>
100 113 
  );
101 114 
};
102 115
103 116 
const OVERLAY_BACKGROUND = 'rgba(15, 23, 42, 0.55)';
154 167 
  },
155 168 
  footerButton: {
156 169 
    flex: 1,
157 170 
  },
158 171 
});