Improve loading state of consent gate and layer

Author: 0x7f

packages/react-native-contentpass-ui/src/components/ContentpassConsentGate.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
 import {
   ContentpassStateType,
   useContentpassSdk,
@@ -35,6 +35,7 @@ export default function ContentpassConsentGate({
   const [isShowingSecondLayer, setIsShowingSecondLayer] = useState(false);
   const [isShowingContentpass, setIsShowingContentpass] = useState(false);
 
+  const [consentResolved, setConsentResolved] = useState(false);
   const [purposesList, setPurposesList] = useState<string[]>([]);
   const [vendorCount, setVendorCount] = useState(0);
 
@@ -136,6 +137,7 @@ export default function ContentpassConsentGate({
       onVisibilityChange?.(visible);
     }
     setIsVisible(visible);
+    setConsentResolved(true);
   }, [
     cmpReady,
     cpAuthState,
@@ -146,6 +148,14 @@ export default function ContentpassConsentGate({
     onVisibilityChange,
   ]);
 
+  if (!consentResolved) {
+    return (
+      <View style={styles.loading}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
   if (!isVisible) {
     return <>{children}</>;
   }
@@ -176,6 +186,11 @@ export default function ContentpassConsentGate({
 }
 
 const styles = StyleSheet.create({
+  loading: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   overlayContainer: {
     flex: 1,
   },

packages/react-native-contentpass-ui/src/components/ContentpassLayer.tsx

@@ -1,24 +1,18 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import type { ContentpassLayerEvents } from './ContentpassLayerEvents';
 import buildFirstLayerUrl from './buildFirstLayerUrl';
 import { useMemo, useState } from 'react';
 
 const MESSAGE_PROTOCOL = 'contentpass-first-layer';
 
-const DISABLE_ANIMATIONS_JS = `
+const EARLY_INJECT_JS = `
   (function () {
     var style = document.createElement('style');
     style.textContent = '*, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } main, .backdrop { visibility: visible !important; transform: none !important; }';
     (document.head || document.documentElement).appendChild(style);
 
-    true;
-  })();
-`;
-
-const GLUE_CODE_JS = `
-  (function () {
-    const originalPostMessage = window.postMessage;
+    var originalPostMessage = window.postMessage;
     window.postMessage = function (data) {
       try {
         window.ReactNativeWebView.postMessage(
@@ -37,7 +31,7 @@ const GLUE_CODE_JS = `
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: 'transparent',
+    backgroundColor: '#fff',
   },
   webview: {
     flex: 1,
@@ -53,6 +47,11 @@ const styles = StyleSheet.create({
     fontSize: 14,
     textAlign: 'center',
   },
+  loading: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 });
 
 export default function ContentpassLayer({
@@ -163,8 +162,7 @@ export default function ContentpassLayer({
         javaScriptEnabled
         domStorageEnabled
         automaticallyAdjustContentInsets={false}
-        injectedJavaScriptBeforeContentLoaded={DISABLE_ANIMATIONS_JS}
-        injectedJavaScript={GLUE_CODE_JS}
+        injectedJavaScriptBeforeContentLoaded={EARLY_INJECT_JS}
         onMessage={(event) => {
           handleMessage(event);
         }}
@@ -195,6 +193,11 @@ export default function ContentpassLayer({
           </View>
         )}
       />
+      {!ready && (
+        <View style={styles.loading}>
+          <ActivityIndicator size="large" />
+        </View>
+      )}
     </View>
   );
 }