Open hemantasapkota opened 1 month ago
any work on this?
I made some minor modifications to an internal fork to get this to work. The Chatwoot RN widget is just a web-view wrapper, so the fix is relatively simple.
https://github.com/user-attachments/assets/6f477574-a410-421a-aef0-5fd65c148851
const [loading, setLoading] = useState(isLoading);
onLoadStart={() => setLoading(true)}
onLoadProgress={() => setLoading(true)}
onLoadEnd={() => setLoading(false)}
const opacity = useMemo(() => {
if (loading) {
return {
opacity: 0,
};
}
return {
opacity: 1,
};
}, [loading]);
style={[styles.webViewContainer, opacity]}
Here's the full gist - https://gist.github.com/hemantasapkota/2450abfe4641915dddebd1a74400dc65
Overview
When initializing the Chatwoot React Native widget, users see a flash of a white background before the widget fully loads. This creates a poor user experience, as there’s no indication that the widget is in the process of loading.
Evidence
In my app, Learn to Code with Yolmo®, this issue is noticeable.
https://github.com/user-attachments/assets/00c37dd5-264e-4196-b879-f472cb87a746
Proposed Solution
To improve the user experience, I propose replacing the white flash with customizable loading options, such as a spinner, message, or background. This would provide a smoother transition and better alignment with app branding.
Customizable Placeholder: Allow developers to define a custom placeholder component that displays while the widget is loading.
Pre-Configured Loading Screen Options: Provide a set of pre-configured loading options, such as spinners, progress bars, or background images, which can be toggled via props.