Customizable Loading Screen for Chatwoot React Native Widget

[hemantasapkota]

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.

white.background.mp4

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.

[AyoCodess]

any work on this?

[hemantasapkota]

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

Screen.Recording.2024-11-15.at.8.12.59.AM.mov

Steps

1. Add a loading state

const [loading, setLoading] = useState(isLoading);

3. Use the webview load events to toggle the loading flag

onLoadStart={() => setLoading(true)}
onLoadProgress={() => setLoading(true)}
onLoadEnd={() => setLoading(false)}

5. Add opacity props to smoothen the loading flow

 const opacity = useMemo(() => {
    if (loading) {
      return {
        opacity: 0,
      };
    }
    return {
      opacity: 1,
    };
  }, [loading]);

6. Update the style prop to use the opacity prop

style={[styles.webViewContainer, opacity]}

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