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

[mubarekmuhiyie]

Hey @hemantasapkota Does the widget properly load after building an apk, installing it on a device?

[hemantasapkota]

@mubarekmuhiyie - yes it does. you can try for yourself by installing the app from the store - https://play.google.com/store/apps/details?id=com.yolmo.learntocode

android preview below

screen-20250216-202122.mp4

[mubarekmuhiyie]

@hemantasapkota After building the apk all the components that import the widget have been crushing with a blank white screen, and I'm suspecting it needs some form of lazy loading to import the component once all its dependencies are loaded. Will adding ur loading state fix this issue as well? I am using Expo Go and it works fine locally but once its built into an apk it crashes all screens the widget is imported to. Below is the error from abd logcat

Thank you for your help!

[hemantasapkota]

@mubarekmuhiyie smells like an imports problem! Check where the ErrorBoundary component is imported from - this type of error often arises when components are renamed / refactor but the imports aren't cleaned up. Hope that helps.

[mubarekmuhiyie]

@hemantasapkota I have not imported ErrorBoundary in any of my components.. Did you use expo go in the project?
To reproduce my issue initialize a new expo app, add chatwoot-react-native-widget, add a screen to launch the widget, build an apk, install on a device and see if the widget properly launches..

[hemantasapkota]

@mubarekmuhiyie - Please raise the issue on a new Github thread.

[mubarekmuhiyie]

@hemantasapkota I have already did. But wanted to check the envt ur using is it expo go with the latest SDK?

[hemantasapkota]

@mubarekmuhiyie nope - I just use vanilla React Native out of the box.

[muhsin-k]

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.

@hemantasapkota Nice work. It would be great if you can create a PR with the main repo. We will definitely merge this.