Fix fading to avoid white empty white square#5868
Conversation
|
Noted that there's still a re-layout issue due to the varying sizes of the receive address text on the bottom of the scene pushing the QR, but outside of the scope of this fix. |
src/components/themed/QrCode.tsx
Outdated
| <ActivityIndicator color={theme.iconTappable} /> | ||
| <Animated.View style={[styles.whiteBox, fadeStyle]}> | ||
| {size <= 0 ? null : ( | ||
| {size <= 0 ? ( |
There was a problem hiding this comment.
This seems kind of hacky using size for loading logic here but I get it. I would prefer an explicit var to make it more obvious (i.e. const layoutPending = size <= 0 // loading state includes layout timing to avoid flicker)
Should also guard against || data == null for completeness, regardless if data == null is even possible - this future-proofs it.
peachbits
force-pushed
the
matthew/qr-code
branch
from
c598860 to
e562a56
Compare
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
|
|
||
| React.useEffect(() => { | ||
| opacity.value = withTiming(data != null ? 1 : 0) | ||
| }, [data, opacity]) |
There was a problem hiding this comment.
Bug: Fade animation completes before QR code view renders
The opacity animation triggers on data changes, but the Animated.View only renders when layoutPending is false (requiring both size > 0 and data != null). If data is set before layout completes, the animation runs while the ActivityIndicator is still showing, completing before the QR code view mounts. This causes the QR code to pop in without the intended fade effect, since the animation dependency array doesn't include size or layoutPending.
|
|
||
| React.useEffect(() => { | ||
| opacity.value = withTiming(data != null ? 1 : 0) | ||
| }, [data, opacity]) |
There was a problem hiding this comment.
Bug: Fade animation completes before QR code view renders
The opacity animation triggers on data changes, but the Animated.View only renders when layoutPending is false (requiring both size > 0 and data != null). If data is set before layout completes, the animation runs while the ActivityIndicator is still showing, completing before the QR code view mounts. This causes the QR code to pop in without the intended fade effect, since the animation dependency array doesn't include size or layoutPending.
|
Fade seems fine under current conditions, can fix the bugbot comments or not. |
peachbits
force-pushed
the
matthew/qr-code
branch
from
e562a56 to
b370540
Compare
2 participants
CHANGELOG
Does this branch warrant an entry to the CHANGELOG?
Dependencies
noneRequirements
If you have made any visual changes to the GUI. Make sure you have:
Note
Prevents a blank white square by showing a spinner until layout/data are ready and animating QR opacity via a shared value.
src/components/themed/QrCode.tsx):layoutPendingto gate rendering; showActivityIndicatoruntil layout size is known anddatais present.useDerivedValue-driven timing withuseSharedValue(opacity)updated inuseEffect;useAnimatedStylenow readsopacitydirectly.Animated.View(QR + center icon) only when ready, preventing an empty white square flicker.Written by Cursor Bugbot for commit b370540. This will update automatically on new commits. Configure here.