feat: Chat loader

Author: thierryskoda

components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.tsx

@@ -1,10 +1,10 @@
+import { LinearGradient } from "@/design-system/linear-gradient";
 import { useAppTheme } from "@/theme/useAppTheme";
 import { hexToRGBA } from "@/utils/colors";
 import { useSnackbars } from "@components/Snackbar/Snackbar.service";
 import { useGradientHeight } from "@components/Snackbar/SnackbarBackdrop/SnackbarBackdrop.utils";
 // import MaskedView from "@react-native-masked-view/masked-view";
 import { SICK_SPRING_CONFIG } from "@theme/animations";
-import { LinearGradient } from "expo-linear-gradient";
 import { memo } from "react";
 import { StyleSheet, useWindowDimensions } from "react-native";
 import Animated, {

design-system/Header/Header.tsx

@@ -12,6 +12,7 @@ import { ITextProps, Text } from "../Text";
 import { ITouchableOpacityProps } from "../TouchableOpacity";
 import { VStack } from "../VStack";
 import { HeaderAction } from "./HeaderAction";
+import { useHeaderHeight } from "@/design-system/Header/Header.utils";
 
 export type HeaderProps = {
   titleStyle?: StyleProp<TextStyle>;
@@ -78,6 +79,8 @@ export function Header(props: HeaderProps) {
 
   const titleContent = titleTx ? translate(titleTx, titleTxOptions) : title;
 
+  const headerHeight = useHeaderHeight();
+
   return (
     <VStack
       // {...debugBorder()}
@@ -90,7 +93,7 @@ export function Header(props: HeaderProps) {
     >
       <HStack
         // {...debugBorder("yellow")}
-        style={[themed($wrapper), $styleOverride]}
+        style={[themed($wrapper), $styleOverride, { height: headerHeight }]}
       >
         <HStack
           // {...debugBorder("red")}
@@ -155,7 +158,6 @@ export function Header(props: HeaderProps) {
 }
 
 const $wrapper: ThemedStyle<ViewStyle> = ({ spacing }) => ({
-  height: 72,
   alignItems: "center",
   paddingHorizontal: spacing.xs,
 });

design-system/Header/Header.utils.ts

@@ -0,0 +1,5 @@
+export function useHeaderHeight() {
+  // For now we hardcode it since it's value from Figma.
+  // Later we might add diff values depending on screen size etc
+  return 72;
+}

design-system/Icon/Icon.android.tsx

@@ -41,6 +41,7 @@ export const iconRegistry: Record<
   block: "block",
   "chevron.left": "chevron-left",
   "chevron.right": "chevron-right",
+  "chevron.up": "expand-less",
   "arrow.right.circle.fill": "arrow-circle-right",
   "lock.open.laptopcomputer": "laptop",
   trash: "delete",

design-system/Icon/Icon.tsx

@@ -38,6 +38,7 @@ export const iconRegistry: Record<IIconName, string> = {
   block: "nosign",
   "chevron.left": "chevron.left",
   "chevron.right": "chevron.right",
+  "chevron.up": "chevron.up",
   "arrow.right.circle.fill": "arrow.right.circle.fill",
   "lock.open.laptopcomputer": "lock.open.laptopcomputer",
   trash: "trash",

design-system/Icon/Icon.types.ts

@@ -1,6 +1,5 @@
-import { ColorValue, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { ColorValue, StyleProp, ViewStyle } from "react-native";
 import { RequireExactlyOne } from "../../types/general";
-import { iconRegistry } from "@/design-system/Icon/Icon";
 
 export type IIconName =
   | "xmark"
@@ -35,13 +34,14 @@ export type IIconName =
   | "block"
   | "chevron.left"
   | "chevron.right"
+  | "chevron.up"
+  | "chevron.down"
   | "arrow.right.circle.fill"
   | "lock.open.laptopcomputer"
   | "trash"
   | "menu"
   | "more_vert"
   | "phone"
-  | "chevron.down"
   | "photo"
   | "dollarsign"
   | "gear"

design-system/Text/Text.presets.ts

@@ -24,15 +24,15 @@ export const textPresets: Record<IPresets, ThemedStyleArray<TextStyle>> = {
 
   body: [textBaseStyle],
 
-  bodyBold: [textBaseStyle, textFontWeightStyles.bold],
+  bodyBold: [textBaseStyle, textFontWeightStyles.medium],
 
   small: [textBaseStyle, textSizeStyles.xs],
 
   smaller: [textBaseStyle, textSizeStyles.xxs],
 
   smallerBold: [textBaseStyle, textSizeStyles.xxs, textFontWeightStyles.bold],
 
-  bigBold: [textBaseStyle, textFontWeightStyles.bold],
+  bigBold: [textBaseStyle, textFontWeightStyles.semiBold],
 
   formHelper: [
     textBaseStyle,

design-system/linear-gradient.tsx

@@ -7,6 +7,7 @@ import { memo } from "react";
 type ILinearGradientProps = ExpoLinearGradientProps & {
   isAbsoluteFill?: boolean;
   orientation?: "vertical" | "horizontal";
+  debug?: boolean;
 };
 
 export const LinearGradient = memo(function LinearGradient(
@@ -15,7 +16,7 @@ export const LinearGradient = memo(function LinearGradient(
   const {
     isAbsoluteFill,
     orientation = "vertical",
-
+    debug = false,
     colors,
     ...rest
   } = props;
@@ -26,10 +27,12 @@ export const LinearGradient = memo(function LinearGradient(
   const end =
     rest.end ?? (orientation === "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 });
 
+  const debugColors = ["#0000FF", "#FF0000"];
+
   return (
     <ExpoLinearGradient
       {...rest}
-      colors={colors}
+      colors={debug ? debugColors : colors}
       start={start}
       end={end}
       style={[

features/conversation-list/conversation-list-empty.tsx

@@ -1,8 +1,11 @@
-import { AnimatedVStack } from "@/design-system/VStack";
+import { AnimatedVStack, VStack } from "@/design-system/VStack";
+import { LinearGradient } from "@/design-system/linear-gradient";
 import { ConversationListItem } from "@/features/conversation-list/conversation-list-item/conversation-list-item";
 import { ConversationListItemAvatarSkeleton } from "@/features/conversation-list/conversation-list-item/conversation-list-item-avatar-skeleton";
+import { useConversationListStyles } from "@/features/conversation-list/conversation-list.styles";
 import { usePinnedConversations } from "@/features/conversation-list/hooks/use-pinned-conversations";
 import { useAppTheme } from "@/theme/useAppTheme";
+import { hexToRGBA } from "@/utils/colors";
 import React, { memo } from "react";
 
 export const ConversationListEmpty = memo(function ConversationListEmpty() {
@@ -19,20 +22,39 @@ export const ConversationListEmpty = memo(function ConversationListEmpty() {
 const ConversationListSkeletons = memo(function ConversationListSkeletons() {
   const { theme } = useAppTheme();
 
+  const { listItemPaddingVertical } = useConversationListStyles();
+
   return (
-    <AnimatedVStack entering={theme.animation.reanimatedFadeInSpring}>
-      {/* 8 to fill up the screen */}
-      {new Array(8).fill(null).map((_, index) => (
-        <ConversationListItem
-          key={index}
-          avatarComponent={
-            <ConversationListItemAvatarSkeleton
-              color={theme.colors.fill.minimal}
-              size={theme.avatarSize.lg}
-            />
-          }
-        />
-      ))}
-    </AnimatedVStack>
+    <VStack style={{ flex: 1 }}>
+      <LinearGradient
+        colors={[
+          hexToRGBA(theme.colors.background.surface, 0),
+          hexToRGBA(theme.colors.background.surface, 1),
+        ]}
+        locations={[0, 0.3]} // 0.3 is trial and error until it looks good
+        style={{
+          position: "absolute",
+          top: (theme.avatarSize.lg + listItemPaddingVertical) * 2, // We want to show 2 full rows before starting the gradient
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 1,
+        }}
+      />
+      <AnimatedVStack entering={theme.animation.reanimatedFadeInSpring}>
+        {/* 6 to fill up the screen */}
+        {new Array(6).fill(null).map((_, index) => (
+          <ConversationListItem
+            key={index}
+            avatarComponent={
+              <ConversationListItemAvatarSkeleton
+                color={theme.colors.fill.minimal}
+                size={theme.avatarSize.lg}
+              />
+            }
+          />
+        ))}
+      </AnimatedVStack>
+    </VStack>
   );
 });

features/conversation-list/conversation-list-item/conversation-list-item-avatar-skeleton.tsx

@@ -1,7 +1,4 @@
 import { Center } from "@/design-system/Center";
-import { LinearGradient } from "@/design-system/linear-gradient";
-import { useAppTheme } from "@/theme/useAppTheme";
-import { hexToRGBA } from "@/utils/colors";
 import { memo } from "react";
 
 export const ConversationListItemAvatarSkeleton = memo(
@@ -10,7 +7,6 @@ export const ConversationListItemAvatarSkeleton = memo(
     size: number;
   }) {
     const { color, size } = props;
-    const { theme } = useAppTheme();
 
     return (
       <Center
@@ -22,7 +18,8 @@ export const ConversationListItemAvatarSkeleton = memo(
           backgroundColor: color,
         }}
       >
-        <LinearGradient
+        {/* Keep until we're sure of final design */}
+        {/* <LinearGradient
           isAbsoluteFill
           style={{
             borderRadius: 999,
@@ -33,7 +30,7 @@ export const ConversationListItemAvatarSkeleton = memo(
             hexToRGBA(theme.colors.background.surfaceless, 0),
             theme.colors.background.surface,
           ]}
-        />
+        /> */}
       </Center>
     );
   }

features/conversation-list/conversation-list-loading.tsx

@@ -0,0 +1,109 @@
+import { AnimatedCenter, Center } from "@/design-system/Center";
+import { AnimatedText, Text } from "@/design-system/Text";
+import { VStack } from "@/design-system/VStack";
+import { Loader } from "@/design-system/loader";
+import { ConversationListEmpty } from "@/features/conversation-list/conversation-list-empty";
+import { $globalStyles } from "@/theme/styles";
+import { ThemedStyle, useAppTheme } from "@/theme/useAppTheme";
+import { debugBorder } from "@/utils/debug-style";
+import { useHeaderHeight } from "@react-navigation/elements";
+import React, { memo } from "react";
+import { StyleSheet, View, ViewStyle } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useDerivedValue,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  withSequence,
+  Easing,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+export const ConversationListLoading = memo(function ConversationListLoading() {
+  const headerHeight = useHeaderHeight();
+
+  const insets = useSafeAreaInsets();
+
+  const countTextAV = useDerivedValue(() => {
+    // Format time as "00.00.000"
+    const timeInMs = Date.now() % 60000; // Get milliseconds within a minute
+    const seconds = Math.floor(timeInMs / 1000);
+    const milliseconds = timeInMs % 1000;
+
+    return `${String(Math.floor(seconds / 10)).padStart(1, "0")}${
+      seconds % 10
+    }.${String(milliseconds).padStart(3, "0")}`;
+  }, []);
+
+  return (
+    <VStack style={$globalStyles.flex1}>
+      <ConversationListEmpty />
+      <VStack
+        {...debugBorder()}
+        style={[
+          $globalStyles.absoluteFill,
+          {
+            alignItems: "center",
+            justifyContent: "center",
+            // To make sure the loader is centered based on the screen height
+            bottom: headerHeight + insets.top,
+          },
+        ]}
+      >
+        {/* <Loader /> */}
+        <ArcLoader />
+        <Text preset="bodyBold">Hello</Text>
+        <Text color="secondary" preset="small">
+          Gathering your messages
+        </Text>
+        {/* <AnimatedText text={countTextAV} /> */}
+      </VStack>
+    </VStack>
+  );
+});
+
+const ArcLoader = () => {
+  const { themed } = useAppTheme();
+  const rotation = useSharedValue(0);
+
+  React.useEffect(() => {
+    const timingConfig = {
+      duration: 1500, // Slower duration for smoother feel
+    };
+
+    rotation.value = withSequence(
+      withTiming(0, timingConfig),
+      withRepeat(
+        withTiming(360, {
+          duration: 1500,
+          // Use bezier curve for smoother animation
+          easing: Easing.bezier(0.35, 0.7, 0.5, 0.7),
+        }),
+        -1, // Infinite loop
+        false // Don't reverse
+      )
+    );
+  }, [rotation]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${rotation.value}deg` }],
+  }));
+
+  return <AnimatedCenter style={[themed($arc), animatedStyle]} />;
+};
+
+const $arc: ThemedStyle<ViewStyle> = ({ colors, spacing }) => ({
+  width: 80,
+  height: 80,
+  borderWidth: 8,
+  borderRadius: 40,
+  borderColor: "transparent",
+  borderTopColor: colors.text.primary,
+  borderLeftColor: colors.text.primary,
+  borderBottomColor: colors.text.primary,
+  borderTopLeftRadius: 40,
+  borderTopRightRadius: 40,
+  borderBottomLeftRadius: 40,
+  borderBottomRightRadius: 40,
+});