chatwoot / chatwoot-react-native-widget

React Native widget for Chatwoot
https://www.npmjs.com/package/@chatwoot/react-native-widget
MIT License
38 stars 40 forks source link

Customizable Loading Screen for Chatwoot React Native Widget #46

Open hemantasapkota opened 1 month ago

hemantasapkota commented 1 month ago

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.

AyoCodess commented 11 hours ago

any work on this?

hemantasapkota commented 1 hour ago

Workaround

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.

Preview

https://github.com/user-attachments/assets/6f477574-a410-421a-aef0-5fd65c148851

Steps

  1. Add a loading state
const [loading, setLoading] = useState(isLoading);
  1. Use the webview load events to toggle the loading flag
onLoadStart={() => setLoading(true)}
onLoadProgress={() => setLoading(true)}
onLoadEnd={() => setLoading(false)}
  1. Add opacity props to smoothen the loading flow
 const opacity = useMemo(() => {
    if (loading) {
      return {
        opacity: 0,
      };
    }
    return {
      opacity: 1,
    };
  }, [loading]);
  1. Update the style prop to use the opacity prop
style={[styles.webViewContainer, opacity]}

Here's the full gist - https://gist.github.com/hemantasapkota/2450abfe4641915dddebd1a74400dc65