@planningcenter/chat-react-native 1.3.0 → 1.3.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.1-rc.0](https://github.com/planningcenter/chat-js/compare/v1.3.0...v1.3.1-rc.0) (2025-02-12)
+
+**Note:** Version bump only for package @planningcenter/chat-react-native
+
+
+
+
+
 ## [1.3.0](https://github.com/planningcenter/chat-js/compare/v1.2.0...v1.3.0) (2025-02-12)
 
 

package/build/components/conversations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAanD,wBAAgB,aAAa,6BAgB5B"}
+{"version":3,"file":"conversations.d.ts","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAcnD,wBAAgB,aAAa,6BAgB5B"}

package/build/components/conversations.js

@@ -1,10 +1,11 @@
 import { useNavigation } from '@react-navigation/native';
 import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query';
 import React, { Suspense, useContext } from 'react';
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native';
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 import { ChatContext } from '../contexts/chat_context';
-import { useTheme } from '../hooks/use_theme';
 import ErrorBoundary from './error_boundary';
+import { useTheme } from '../hooks';
+import { Spinner } from './display/spinner';
 export function Conversations() {
     const { token } = useContext(ChatContext);
     if (!token)
@@ -23,16 +24,32 @@ const Loaded = () => {
         queryKey: ['/chat/v2/me/conversations'],
     });
     const navigation = useNavigation();
-    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
+    return (<FlatList data={conversations?.data} contentContainerStyle={styles.container} style={styles.scrollView} ListEmptyComponent={<Text>No conversations found</Text>} ListHeaderComponent={<View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <Spinner size={24}/>
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>} renderItem={({ item }) => (<Pressable onPress={() => navigation.navigate('Settings')}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
         </Pressable>)}/>);
 };
 const useStyles = () => {
     const { colors } = useTheme();
     return StyleSheet.create({
-        container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+        scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+        container: { gap: 8, padding: 16 },
         foo: { fontSize: 24, color: colors.testColor },
         listItem: { color: colors.fillColorNeutral020 },
+        row: {
+            gap: 16,
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        column: { gap: 16 },
+        spinnerContainer: {
+            height: 20,
+        },
     });
 };
 //# sourceMappingURL=conversations.js.map

package/build/components/conversations.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,uBAAuB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACjF,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACnD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,aAAa,MAAM,kBAAkB,CAAA;AAQ5C,MAAM,UAAU,aAAa;IAC3B,MAAM,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAA;IAEzC,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAA;IAEvB,OAAO,CACL,CAAC,uBAAuB,CACtB;MAAA,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACd,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,CAC5B;UAAA,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC,CAC1C;YAAA,CAAC,MAAM,CAAC,AAAD,EACT;UAAA,EAAE,QAAQ,CACZ;QAAA,EAAE,aAAa,CAAC,CACjB,CACH;IAAA,EAAE,uBAAuB,CAAC,CAC3B,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,GAAG,gBAAgB,CAAwB;QACtE,QAAQ,EAAE,CAAC,2BAA2B,CAAC;KACxC,CAAC,CAAA;IACF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAElC,OAAO,CACL,CAAC,QAAQ,CACP,IAAI,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAC1B,qBAAqB,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CACxC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE,IAAI,CAAC,CAAC,CACxD,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC,CACnE,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACxB,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CACxD;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,IAAI,CAC7D;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,EACF,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,eAAe,EAAE,MAAM,CAAC,mBAAmB,EAAE;QACzE,GAAG,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE;QAC9C,QAAQ,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,mBAAmB,EAAE;KAChD,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet, Text } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { useTheme } from '../hooks/use_theme'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n  })\n}\n"]}
+{"version":3,"file":"conversations.js","sourceRoot":"","sources":["../../src/components/conversations.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'\nimport React, { Suspense, useContext } from 'react'\nimport { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'\nimport { ChatContext } from '../contexts/chat_context'\nimport { ConversationRecord } from '../types'\nimport ErrorBoundary from './error_boundary'\nimport { useTheme } from '../hooks'\nimport { Spinner } from './display/spinner'\n\ntype ConversationsResponse = {\n  data: ConversationRecord[]\n  links: Record<string, string>\n  meta: Record<string, string>\n}\n\nexport function Conversations() {\n  const { token } = useContext(ChatContext)\n\n  if (!token) return null\n\n  return (\n    <QueryErrorResetBoundary>\n      {({ reset }) => (\n        <ErrorBoundary onReset={reset}>\n          <Suspense fallback={<Text>loading...</Text>}>\n            <Loaded />\n          </Suspense>\n        </ErrorBoundary>\n      )}\n    </QueryErrorResetBoundary>\n  )\n}\n\nconst Loaded = () => {\n  const styles = useStyles()\n  const { data: conversations } = useSuspenseQuery<ConversationsResponse>({\n    queryKey: ['/chat/v2/me/conversations'],\n  })\n  const navigation = useNavigation()\n\n  return (\n    <FlatList\n      data={conversations?.data}\n      contentContainerStyle={styles.container}\n      style={styles.scrollView}\n      ListEmptyComponent={<Text>No conversations found</Text>}\n      ListHeaderComponent={\n        <View style={styles.column}>\n          <Text style={styles.foo}>Display Components</Text>\n          <View style={[styles.row, styles.spinnerContainer]}>\n            <Spinner size={24} />\n          </View>\n          <Text style={styles.foo}>Conversations</Text>\n        </View>\n      }\n      renderItem={({ item }) => (\n        <Pressable onPress={() => navigation.navigate('Settings')}>\n          <Text style={styles.listItem}>{item.attributes.title}</Text>\n        </Pressable>\n      )}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },\n    container: { gap: 8, padding: 16 },\n    foo: { fontSize: 24, color: colors.testColor },\n    listItem: { color: colors.fillColorNeutral020 },\n    row: {\n      gap: 16,\n      flexDirection: 'row',\n      alignItems: 'center',\n    },\n    column: { gap: 16 },\n    spinnerContainer: {\n      height: 20,\n    },\n  })\n}\n"]}

package/build/components/display/spinner.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SpinnerProps {
+    /**
+     *  Size of the spinner in px
+     * */
+    size?: number;
+}
+export declare function Spinner({ size }: SpinnerProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=spinner.d.ts.map

package/build/components/display/spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,UAAU,YAAY;IACpB;;SAEK;IACL,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAS,EAAE,EAAE,YAAY,qBAsElD"}

package/build/components/display/spinner.js

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { useTheme } from '../../hooks';
+export function Spinner({ size = 20 }) {
+    const rotation = useRef(new Animated.Value(0)).current;
+    const styles = useStyles();
+    const animation = Animated.loop(Animated.timing(rotation, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+    }));
+    const rotateValue = rotation.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+    useEffect(() => {
+        animation.start();
+        return () => animation.stop();
+    }, [animation]);
+    useEffect(() => () => rotation.setValue(0), [rotation]);
+    return (<View style={styles.container}>
+      <Animated.View style={{
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            transform: [{ rotate: rotateValue }],
+        }}>
+        <View style={[
+            styles.clipping,
+            {
+                width: size / 2,
+                height: size / 2,
+            },
+        ]}>
+          <View style={[
+            styles.circle,
+            styles.spinner,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+            },
+        ]}/>
+        </View>
+        <View style={[
+            styles.circle,
+            styles.track,
+            {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+            },
+        ]}/>
+      </Animated.View>
+    </View>);
+}
+const useStyles = () => {
+    const { colors } = useTheme();
+    return StyleSheet.create({
+        container: {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 200,
+            justifyContent: 'center',
+            alignItems: 'center',
+            opacity: 0.7,
+        },
+        circle: {
+            borderStyle: 'solid',
+            borderWidth: 3,
+        },
+        spinner: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            borderColor: colors.fillColorNeutral020,
+        },
+        track: {
+            borderColor: colors.fillColorNeutral050Base,
+        },
+        clipping: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            overflow: 'hidden',
+            zIndex: 200,
+        },
+    });
+};
+//# sourceMappingURL=spinner.js.map

package/build/components/display/spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/display/spinner.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect, useRef } from 'react'\nimport { Animated, Easing, StyleSheet, View } from 'react-native'\nimport { useTheme } from '../../hooks'\n\ninterface SpinnerProps {\n  /**\n   *  Size of the spinner in px\n   * */\n  size?: number\n}\n\nexport function Spinner({ size = 20 }: SpinnerProps) {\n  const rotation = useRef(new Animated.Value(0)).current\n  const styles = useStyles()\n\n  const animation = Animated.loop(\n    Animated.timing(rotation, {\n      toValue: 1,\n      duration: 1000,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    })\n  )\n\n  const rotateValue = rotation.interpolate({\n    inputRange: [0, 1],\n    outputRange: ['0deg', '360deg'],\n  })\n\n  useEffect(() => {\n    animation.start()\n    return () => animation.stop()\n  }, [animation])\n\n  useEffect(() => () => rotation.setValue(0), [rotation])\n\n  return (\n    <View style={styles.container}>\n      <Animated.View\n        style={{\n          width: size,\n          height: size,\n          borderRadius: size / 2,\n          transform: [{ rotate: rotateValue }],\n        }}\n      >\n        <View\n          style={[\n            styles.clipping,\n            {\n              width: size / 2,\n              height: size / 2,\n            },\n          ]}\n        >\n          <View\n            style={[\n              styles.circle,\n              styles.spinner,\n              {\n                width: size,\n                height: size,\n                borderRadius: size / 2,\n              },\n            ]}\n          />\n        </View>\n        <View\n          style={[\n            styles.circle,\n            styles.track,\n            {\n              width: size,\n              height: size,\n              borderRadius: size / 2,\n            },\n          ]}\n        />\n      </Animated.View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    container: {\n      width: '100%',\n      height: '100%',\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      zIndex: 200,\n      justifyContent: 'center',\n      alignItems: 'center',\n      opacity: 0.7,\n    },\n    circle: {\n      borderStyle: 'solid',\n      borderWidth: 3,\n    },\n    spinner: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      borderColor: colors.fillColorNeutral020,\n    },\n    track: {\n      borderColor: colors.fillColorNeutral050Base,\n    },\n    clipping: {\n      position: 'absolute',\n      top: 0,\n      left: 0,\n      overflow: 'hidden',\n      zIndex: 200,\n    },\n  })\n}\n"]}

package/build/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useCreateChatTheme } from './use_create_chat_theme';
+export { useTheme } from './use_theme';
+//# sourceMappingURL=index.d.ts.map

package/build/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA"}

package/build/hooks/index.js

@@ -0,0 +1,3 @@
+export { useCreateChatTheme } from './use_create_chat_theme';
+export { useTheme } from './use_theme';
+//# sourceMappingURL=index.js.map

package/build/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA","sourcesContent":["export { useCreateChatTheme } from './use_create_chat_theme'\nexport { useTheme } from './use_theme'\n"]}

package/build/index.d.ts

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations';
 import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { useCreateChatTheme } from './hooks';
 import { OAuthToken } from './types';
 import { baseUrlMap, uploadUrlMap } from './utils/session';
 import { TemporaryDefaultColorsType } from './utils/theme';

package/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,EACZ,kBAAkB,GACnB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AACpC,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAA;AAE1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EACb,UAAU,EACV,0BAA0B,EAC1B,YAAY,EACZ,kBAAkB,GACnB,CAAA"}

package/build/index.js

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations';
 import { ChatContext, ChatProvider } from './contexts/chat_context';
-import { useCreateChatTheme } from './hooks/use_create_chat_theme';
+import { useCreateChatTheme } from './hooks';
 import { baseUrlMap, uploadUrlMap } from './utils/session';
 export { baseUrlMap, ChatContext, ChatProvider, Conversations, uploadUrlMap, useCreateChatTheme, };
 //# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAA;AAElE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EACZ,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks/use_create_chat_theme'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n  useCreateChatTheme,\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAC1D,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAG1D,OAAO,EACL,UAAU,EACV,WAAW,EACX,YAAY,EACZ,aAAa,EAGb,YAAY,EACZ,kBAAkB,GACnB,CAAA","sourcesContent":["import { Conversations } from './components/conversations'\nimport { ChatContext, ChatProvider } from './contexts/chat_context'\nimport { useCreateChatTheme } from './hooks'\nimport { OAuthToken } from './types'\nimport { baseUrlMap, uploadUrlMap } from './utils/session'\nimport { TemporaryDefaultColorsType } from './utils/theme'\n\nexport {\n  baseUrlMap,\n  ChatContext,\n  ChatProvider,\n  Conversations,\n  OAuthToken,\n  TemporaryDefaultColorsType,\n  uploadUrlMap,\n  useCreateChatTheme,\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "1.3.0",
+  "version": "1.3.1-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -33,5 +33,5 @@
     "prettier": "^3.4.2",
     "react-native": "0.74.5"
   },
-  "gitHead": "fccff0f8691ba483d7f504423a1bd649c94a5af8"
+  "gitHead": "a811b0dd5f01919bbc459c906e985db1b05e1a9e"
 }

package/src/components/conversations.tsx

@@ -1,11 +1,12 @@
 import { useNavigation } from '@react-navigation/native'
 import { QueryErrorResetBoundary, useSuspenseQuery } from '@tanstack/react-query'
 import React, { Suspense, useContext } from 'react'
-import { FlatList, Pressable, StyleSheet, Text } from 'react-native'
+import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native'
 import { ChatContext } from '../contexts/chat_context'
-import { useTheme } from '../hooks/use_theme'
 import { ConversationRecord } from '../types'
 import ErrorBoundary from './error_boundary'
+import { useTheme } from '../hooks'
+import { Spinner } from './display/spinner'
 
 type ConversationsResponse = {
   data: ConversationRecord[]
@@ -42,8 +43,17 @@ const Loaded = () => {
     <FlatList
       data={conversations?.data}
       contentContainerStyle={styles.container}
+      style={styles.scrollView}
       ListEmptyComponent={<Text>No conversations found</Text>}
-      ListHeaderComponent={<Text style={styles.foo}>Conversations</Text>}
+      ListHeaderComponent={
+        <View style={styles.column}>
+          <Text style={styles.foo}>Display Components</Text>
+          <View style={[styles.row, styles.spinnerContainer]}>
+            <Spinner size={24} />
+          </View>
+          <Text style={styles.foo}>Conversations</Text>
+        </View>
+      }
       renderItem={({ item }) => (
         <Pressable onPress={() => navigation.navigate('Settings')}>
           <Text style={styles.listItem}>{item.attributes.title}</Text>
@@ -57,8 +67,18 @@ const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    container: { columnGap: 16, backgroundColor: colors.fillColorNeutral080 },
+    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
+    container: { gap: 8, padding: 16 },
     foo: { fontSize: 24, color: colors.testColor },
     listItem: { color: colors.fillColorNeutral020 },
+    row: {
+      gap: 16,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    column: { gap: 16 },
+    spinnerContainer: {
+      height: 20,
+    },
   })
 }

package/src/components/display/spinner.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react'
+import { Animated, Easing, StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+
+interface SpinnerProps {
+  /**
+   *  Size of the spinner in px
+   * */
+  size?: number
+}
+
+export function Spinner({ size = 20 }: SpinnerProps) {
+  const rotation = useRef(new Animated.Value(0)).current
+  const styles = useStyles()
+
+  const animation = Animated.loop(
+    Animated.timing(rotation, {
+      toValue: 1,
+      duration: 1000,
+      easing: Easing.linear,
+      useNativeDriver: true,
+    })
+  )
+
+  const rotateValue = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  })
+
+  useEffect(() => {
+    animation.start()
+    return () => animation.stop()
+  }, [animation])
+
+  useEffect(() => () => rotation.setValue(0), [rotation])
+
+  return (
+    <View style={styles.container}>
+      <Animated.View
+        style={{
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          transform: [{ rotate: rotateValue }],
+        }}
+      >
+        <View
+          style={[
+            styles.clipping,
+            {
+              width: size / 2,
+              height: size / 2,
+            },
+          ]}
+        >
+          <View
+            style={[
+              styles.circle,
+              styles.spinner,
+              {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+              },
+            ]}
+          />
+        </View>
+        <View
+          style={[
+            styles.circle,
+            styles.track,
+            {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+            },
+          ]}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      zIndex: 200,
+      justifyContent: 'center',
+      alignItems: 'center',
+      opacity: 0.7,
+    },
+    circle: {
+      borderStyle: 'solid',
+      borderWidth: 3,
+    },
+    spinner: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderColor: colors.fillColorNeutral020,
+    },
+    track: {
+      borderColor: colors.fillColorNeutral050Base,
+    },
+    clipping: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      overflow: 'hidden',
+      zIndex: 200,
+    },
+  })
+}

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useCreateChatTheme } from './use_create_chat_theme'
+export { useTheme } from './use_theme'

package/src/index.tsx

@@ -1,6 +1,6 @@
 import { Conversations } from './components/conversations'
 import { ChatContext, ChatProvider } from './contexts/chat_context'
-import { useCreateChatTheme } from './hooks/use_create_chat_theme'
+import { useCreateChatTheme } from './hooks'
 import { OAuthToken } from './types'
 import { baseUrlMap, uploadUrlMap } from './utils/session'
 import { TemporaryDefaultColorsType } from './utils/theme'