fix: show loading indicator instead of returning null from the Chat component when DB not initialized (#2820)

khushal87 · web-flow · commit 6d5a51b01bbf · 2024-12-03T17:16:37.000+05:30
* fix: show loading indicator instead of returning null from the Chat component when DB not initialized * fix: db initialization logic * Revert "fix: db initialization logic" This reverts commit a0a98c6. * fix: replace default loading indicator to null
diff --git a/examples/ExpoMessaging/yarn.lock b/examples/ExpoMessaging/yarn.lock
@@ -7310,10 +7310,10 @@ stream-buffers@2.2.x, stream-buffers@~2.2.0:
   version "0.0.0"
   uid ""
 
-stream-chat-react-native-core@5.42.2:
-  version "5.42.2"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.42.2.tgz#edb92b490d4beb894ba549c7deefc770f501360c"
-  integrity sha512-eA2fK3eYdhr2RSbB22s1ha29y4EPbj9yPAskWxGo1aJK+KXwXDlAYqGtJa/8saRSSU4DdV89yG5ihvTFgP+Huw==
+stream-chat-react-native-core@5.43.1:
+  version "5.43.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.1.tgz#ec0d5a06e329c8991c46cff5bd0211bc94d2b26f"
+  integrity sha512-qj/WfjFeCCP2wcp1YZGFJgRYGdSWXd0maG3hn3oURgFR6p/BmO6lDL2g3jnLq0SEkD8x+KZeNBS9cs1gW5Gblw==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"
@@ -7326,27 +7326,12 @@ stream-chat-react-native-core@5.42.2:
     path "0.12.7"
     react-native-markdown-package "1.8.2"
     react-native-url-polyfill "^1.3.0"
-    stream-chat "8.44.0"
+    stream-chat "8.45.1"
 
 "stream-chat-react-native-core@link:../../package":
   version "0.0.0"
   uid ""
 
-stream-chat@8.44.0:
-  version "8.44.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.44.0.tgz#e48446cf91db786e80a2e7358ac4f1601e5e97f0"
-  integrity sha512-7HNtimD8sT/51rsFibGcD6uBgKj+vlKyYCZMDzjYQEaEsrLqyAg48dOyNM4L2FTF5aXgo9SlxZr21SPleeA2BA==
-  dependencies:
-    "@babel/runtime" "^7.16.3"
-    "@types/jsonwebtoken" "~9.0.0"
-    "@types/ws" "^7.4.0"
-    axios "^1.6.0"
-    base64-js "^1.5.1"
-    form-data "^4.0.0"
-    isomorphic-ws "^4.0.1"
-    jsonwebtoken "~9.0.0"
-    ws "^7.5.10"
-
 stream-chat@8.45.1:
   version "8.45.1"
   resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.45.1.tgz#001f452520602ebffe45f1634b5f5dd1ff036ec5"
diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock
@@ -1556,7 +1556,7 @@ SPEC CHECKSUMS:
   FirebaseRemoteConfigInterop: 6efda51fb5e2f15b16585197e26eaa09574e8a4d
   FirebaseSessions: dbd14adac65ce996228652c1fc3a3f576bdf3ecc
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f
+  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
   GoogleAppMeasurement: f3abf08495ef2cba7829f15318c373b8d9226491
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
   GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
diff --git a/examples/SampleApp/yarn.lock b/examples/SampleApp/yarn.lock
@@ -6837,10 +6837,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.42.2:
-  version "5.42.2"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.42.2.tgz#edb92b490d4beb894ba549c7deefc770f501360c"
-  integrity sha512-eA2fK3eYdhr2RSbB22s1ha29y4EPbj9yPAskWxGo1aJK+KXwXDlAYqGtJa/8saRSSU4DdV89yG5ihvTFgP+Huw==
+stream-chat-react-native-core@5.43.1:
+  version "5.43.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.1.tgz#ec0d5a06e329c8991c46cff5bd0211bc94d2b26f"
+  integrity sha512-qj/WfjFeCCP2wcp1YZGFJgRYGdSWXd0maG3hn3oURgFR6p/BmO6lDL2g3jnLq0SEkD8x+KZeNBS9cs1gW5Gblw==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"
@@ -6853,7 +6853,7 @@ stream-chat-react-native-core@5.42.2:
     path "0.12.7"
     react-native-markdown-package "1.8.2"
     react-native-url-polyfill "^1.3.0"
-    stream-chat "8.44.0"
+    stream-chat "8.45.1"
 
 "stream-chat-react-native-core@link:../../package":
   version "0.0.0"
@@ -6863,21 +6863,6 @@ stream-chat-react-native-core@5.42.2:
   version "0.0.0"
   uid ""
 
-stream-chat@8.44.0:
-  version "8.44.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.44.0.tgz#e48446cf91db786e80a2e7358ac4f1601e5e97f0"
-  integrity sha512-7HNtimD8sT/51rsFibGcD6uBgKj+vlKyYCZMDzjYQEaEsrLqyAg48dOyNM4L2FTF5aXgo9SlxZr21SPleeA2BA==
-  dependencies:
-    "@babel/runtime" "^7.16.3"
-    "@types/jsonwebtoken" "~9.0.0"
-    "@types/ws" "^7.4.0"
-    axios "^1.6.0"
-    base64-js "^1.5.1"
-    form-data "^4.0.0"
-    isomorphic-ws "^4.0.1"
-    jsonwebtoken "~9.0.0"
-    ws "^7.5.10"
-
 stream-chat@8.45.1:
   version "8.45.1"
   resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.45.1.tgz#001f452520602ebffe45f1634b5f5dd1ff036ec5"
diff --git a/examples/TypeScriptMessaging/ios/Podfile.lock b/examples/TypeScriptMessaging/ios/Podfile.lock
@@ -1429,7 +1429,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
+  DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
   FBLazyVector: f64d1e2ea739b4d8f7e4740cde18089cd97fe864
   FBReactNativeSpec: 9f2b8b243131565335437dba74923a8d3015e780
   Flipper: c7a0093234c4bdd456e363f2f19b2e4b27652d44
@@ -1441,7 +1441,7 @@ SPEC CHECKSUMS:
   Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
   FlipperKit: 37525a5d056ef9b93d1578e04bc3ea1de940094f
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 69ef571f3de08433d766d614c73a9838a06bf7eb
+  glog: 08b301085f15bcbb6ff8632a8ebaf239aae04e6a
   hermes-engine: 9cecf9953a681df7556b8cc9c74905de8f3293c0
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
diff --git a/examples/TypeScriptMessaging/yarn.lock b/examples/TypeScriptMessaging/yarn.lock
@@ -6899,10 +6899,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.42.2:
-  version "5.42.2"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.42.2.tgz#edb92b490d4beb894ba549c7deefc770f501360c"
-  integrity sha512-eA2fK3eYdhr2RSbB22s1ha29y4EPbj9yPAskWxGo1aJK+KXwXDlAYqGtJa/8saRSSU4DdV89yG5ihvTFgP+Huw==
+stream-chat-react-native-core@5.43.1:
+  version "5.43.1"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.43.1.tgz#ec0d5a06e329c8991c46cff5bd0211bc94d2b26f"
+  integrity sha512-qj/WfjFeCCP2wcp1YZGFJgRYGdSWXd0maG3hn3oURgFR6p/BmO6lDL2g3jnLq0SEkD8x+KZeNBS9cs1gW5Gblw==
   dependencies:
     "@gorhom/bottom-sheet" "^4.6.4"
     dayjs "1.10.5"
@@ -6915,7 +6915,7 @@ stream-chat-react-native-core@5.42.2:
     path "0.12.7"
     react-native-markdown-package "1.8.2"
     react-native-url-polyfill "^1.3.0"
-    stream-chat "8.44.0"
+    stream-chat "8.45.1"
 
 "stream-chat-react-native-core@link:../../package":
   version "0.0.0"
@@ -6930,21 +6930,6 @@ stream-chat-react-native-devtools@^1.1.0:
   version "0.0.0"
   uid ""
 
-stream-chat@8.44.0:
-  version "8.44.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.44.0.tgz#e48446cf91db786e80a2e7358ac4f1601e5e97f0"
-  integrity sha512-7HNtimD8sT/51rsFibGcD6uBgKj+vlKyYCZMDzjYQEaEsrLqyAg48dOyNM4L2FTF5aXgo9SlxZr21SPleeA2BA==
-  dependencies:
-    "@babel/runtime" "^7.16.3"
-    "@types/jsonwebtoken" "~9.0.0"
-    "@types/ws" "^7.4.0"
-    axios "^1.6.0"
-    base64-js "^1.5.1"
-    form-data "^4.0.0"
-    isomorphic-ws "^4.0.1"
-    jsonwebtoken "~9.0.0"
-    ws "^7.5.10"
-
 stream-chat@8.45.1:
   version "8.45.1"
   resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-8.45.1.tgz#001f452520602ebffe45f1634b5f5dd1ff036ec5"
diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx
@@ -100,6 +100,12 @@ export type ChatProps<
      * ```
      */
     i18nInstance?: Streami18n;
+    /**
+     * Custom loading indicator component to be used to represent the loading state of the chat.
+     *
+     * This can be used during the phase when db is not initialised.
+     */
+    LoadingIndicator?: React.ComponentType | null;
     /**
      * You can pass the theme object to customize the styles of Chat components. You can check the default theme in [theme.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/themeContext/utils/theme.ts)
      *
@@ -143,6 +149,7 @@ const ChatWithContext = <
     enableOfflineSupport = false,
     i18nInstance,
     ImageComponent = Image,
+    LoadingIndicator = null,
     resizableCDNHosts = ['.stream-io-cdn.com'],
     style,
   } = props;
@@ -257,7 +264,7 @@ const ChatWithContext = <
 
   if (userID && enableOfflineSupport && !initialisedDatabase) {
     // if user id has been set and offline support is enabled, we need to wait for database to be initialised
-    return null;
+    return LoadingIndicator ? <LoadingIndicator /> : null;
   }
 
   return (
