Merge upstream develop

Author: github-actions[bot]

.gitlab/ci/build_rs_core.yml

@@ -48,6 +48,30 @@ rs-core-clippy:
     - cd packages/rs-core
     - just clippy
 
+rs-core-tests:
+  extends: .rust-check
+  script:
+    - cd packages/rs-core
+    - just test
+
+rs-common-format-check:
+  extends: .rust-check
+  script:
+    - cd packages/rs-core
+    - cargo fmt --check
+
+rs-common-clippy:
+  extends: .rust-check
+  script:
+    - cd packages/rs-common
+    - cargo clippy
+
+rs-common-tests:
+  extends: .rust-check
+  script:
+    - cd packages/rs-common
+    - cargo test
+
 # rs-core-build:
 #   extends: .rs-core-workflow
 #   stage: build

Cargo.lock

@@ -159,13 +159,14 @@ function WebFeedViewer<T>({
   data,
   renderItem,
   keyExtractor,
+  HeaderComponent,
   ListHeaderComponent,
   ListFooterComponent,
   ListEmptyComponent,
   onEndReached,
   contentContainerStyle,
   stickyHeaderIndices,
-}: FlashListProps<T>) {
+}: ListProps<T>) {
   const sentinelRef = useRef<View>(null);
   const items = (data as readonly T[] | null | undefined) ?? [];
   const [visibleCount, setVisibleCount] = useState(WEB_INITIAL_VISIBLE);
@@ -203,6 +204,7 @@ function WebFeedViewer<T>({
 
   return (
     <View style={contentContainerStyle}>
+      {renderNode(HeaderComponent)}
       {renderNode(ListHeaderComponent)}
       {isEmpty
         ? renderNode(ListEmptyComponent)

apps/polycentric/src/common/components/List/List.tsx

@@ -10,6 +10,7 @@ import { isWeb } from '@/src/common/util/platform';
 import { Text } from '@/src/common/components/primitives';
 import { Atoms, useTheme } from '@/src/common/theme';
 import { Post } from '../post/Post';
+import { PostSkeletonList } from '../post/PostSkeleton';
 
 export type FeedListProps = Omit<ListProps<PostData>, 'data' | 'renderItem'> & {
   feed: FeedHookResult;
@@ -38,7 +39,9 @@ export default function FeedList({
       keyExtractor={keyExtractor}
       data={feed.items}
       ListEmptyComponent={
-        !feed.isLoading ? (
+        feed.isLoading ? (
+          <PostSkeletonList />
+        ) : (
           <View
             style={[
               Atoms.flex_1,
@@ -49,7 +52,7 @@ export default function FeedList({
           >
             <Text color="neutral_500">{emptyMessage}</Text>
           </View>
-        ) : null
+        )
       }
       ListFooterComponent={
         feed.hasMore && feed.items.length > 0 ? (

apps/polycentric/src/features/feed/FeedList.tsx

@@ -22,6 +22,8 @@ export function useExploreFeed(options?: {
     new Query.GetExploreFeed({
       identity: identity === '' ? undefined : identity,
     }),
+    undefined,
+    enabled,
   );
 
   const items = useMemo(() => {

apps/polycentric/src/features/feed/hooks/useExploreFeed.ts

@@ -20,6 +20,8 @@ export function useFollowingFeed(options?: {
   const query = useQuery(
     feedQueryKeys.following(),
     new Query.GetFollowingFeed({ followerIdentity }),
+    undefined,
+    enabled,
   );
 
   const items = useMemo(() => {

apps/polycentric/src/features/feed/hooks/useFollowingFeed.ts

@@ -43,6 +43,8 @@ const useFollows = create<FollowsState>((set, get) => ({
    * Creates the Follow event and syncs
    */
   async addFollow(client, identity) {
+    const follows = get().follows;
+
     const content = v2.Content.create({
       contentBody: {
         oneofKind: 'follow',
@@ -53,10 +55,18 @@ const useFollows = create<FollowsState>((set, get) => ({
     await client.contentManager.save(content);
     const event = await client.buildEvent(content, COLLECTION.GRAPH);
     const signedEvent = await client.signEvent(event);
-    await client.commitEvent(signedEvent, content);
-    await client.sync();
 
-    set({ follows: new Map(get().follows).set(identity, true) });
+    // Optimistically upate the state
+    set({ follows: new Map(follows).set(identity, true) });
+
+    try {
+      await client.commitEvent(signedEvent, content);
+      await client.sync();
+    } catch (err) {
+      console.error(err);
+      // revert the change
+      set({ follows });
+    }
   },
   /**
    * Creates a Delete event for the last know Follow event and sync
@@ -65,6 +75,8 @@ const useFollows = create<FollowsState>((set, get) => ({
     const self = client.activeIdentityKey;
     if (!self) return;
 
+    const follows = get().follows;
+
     const bundles = client.listValidEvents(self, COLLECTION.GRAPH);
 
     // Tombstone every active Follow event this identity wrote that targets
@@ -77,30 +89,37 @@ const useFollows = create<FollowsState>((set, get) => ({
           entry !== null && entry.identity === identity,
       );
 
-    for (const { event } of targets) {
-      if (!event.key) continue;
-      const deleteContent = v2.Content.create({
-        contentBody: {
-          oneofKind: 'delete',
-          delete: { eventKey: event.key },
-        },
-      });
-      await client.contentManager.save(deleteContent);
-      const deleteEvent = await client.buildEvent(
-        deleteContent,
-        COLLECTION.GRAPH,
-      );
-      const signedDelete = await client.signEvent(deleteEvent);
-      await client.commitEvent(signedDelete, deleteContent);
+    // Optimistically upate the state
+    const next = new Map(follows);
+    next.delete(identity);
+    set({ follows: next });
+
+    try {
+      for (const { event } of targets) {
+        if (!event.key) continue;
+        const deleteContent = v2.Content.create({
+          contentBody: {
+            oneofKind: 'delete',
+            delete: { eventKey: event.key },
+          },
+        });
+        await client.contentManager.save(deleteContent);
+        const deleteEvent = await client.buildEvent(
+          deleteContent,
+          COLLECTION.GRAPH,
+        );
+        const signedDelete = await client.signEvent(deleteEvent);
+        await client.commitEvent(signedDelete, deleteContent);
+      }
+    } catch (err) {
+      console.error(err);
+      // Revert the state change
+      set({ follows });
     }
 
     if (targets.length > 0) {
       await client.sync();
     }
-
-    const next = new Map(get().follows);
-    next.delete(identity);
-    set({ follows: next });
   },
   /**
    * Returns the synced and valid (post tombstoned) Follow events

apps/polycentric/src/features/follow/hooks/useFollows.ts

@@ -20,13 +20,17 @@ export default function OnboardingWelcomeScreen() {
               Atoms.inset_0,
               Atoms.justify_center,
               Atoms.items_center,
-              Atoms.p_2xl,
+              Atoms.gap_2xl,
+              Atoms.p_3xl,
             ]}
           >
             <Image
               source={LOGO_WITH_TEXT}
               contentFit="contain"
-              style={{ width: '100%', height: '100%' }}
+              style={{
+                width: '100%',
+                aspectRatio: 1,
+              }}
             />
           </View>
           <View style={[Atoms.gap_md, Atoms.w_full, Atoms.mt_auto]}>

apps/polycentric/src/features/onboarding/OnboardingWelcomeScreen.tsx

@@ -0,0 +1,101 @@
+import { Atoms, useTheme, withHexOpacity } from '@/src/common/theme';
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  Easing,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+
+const AVATAR_SIZE = 40;
+const PULSE_MS = 900;
+
+function useShimmerOpacity() {
+  const opacity = useSharedValue(0.5);
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withTiming(1, { duration: PULSE_MS, easing: Easing.inOut(Easing.ease) }),
+      -1,
+      true,
+    );
+  }, [opacity]);
+  return useAnimatedStyle(() => ({ opacity: opacity.value }));
+}
+
+function Bar({
+  width,
+  height = 12,
+}: {
+  width: number | `${number}%`;
+  height?: number;
+}) {
+  const { theme } = useTheme();
+  return (
+    <View
+      style={{
+        width,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: withHexOpacity(theme.palette.neutral_500, '20'),
+      }}
+    />
+  );
+}
+
+export function PostSkeleton() {
+  const { theme } = useTheme();
+  const animatedStyle = useShimmerOpacity();
+
+  return (
+    <Animated.View
+      style={[
+        Atoms.w_full,
+        Atoms.px_md,
+        Atoms.pt_md,
+        Atoms.pb_md,
+        Atoms.flex_row,
+        Atoms.gap_md,
+        animatedStyle,
+        {
+          borderBottomWidth: 1,
+          borderBottomColor: withHexOpacity(theme.palette.neutral_500, '20'),
+        },
+      ]}
+    >
+      <View
+        style={{
+          width: AVATAR_SIZE,
+          height: AVATAR_SIZE,
+          borderRadius: AVATAR_SIZE / 2,
+          backgroundColor: withHexOpacity(theme.palette.neutral_500, '20'),
+        }}
+      />
+      <View style={[Atoms.flex_1, Atoms.gap_sm]}>
+        <View style={[Atoms.flex_row, Atoms.gap_sm, Atoms.align_center]}>
+          <Bar width={120} />
+          <Bar width={60} />
+          <Bar width={40} />
+        </View>
+        <Bar width="100%" />
+        <Bar width="80%" />
+        <View style={[Atoms.flex_row, Atoms.gap_lg, Atoms.mt_sm]}>
+          <Bar width={28} height={14} />
+          <Bar width={28} height={14} />
+          <Bar width={28} height={14} />
+        </View>
+      </View>
+    </Animated.View>
+  );
+}
+
+export function PostSkeletonList({ count = 6 }: { count?: number }) {
+  return (
+    <View>
+      {Array.from({ length: count }).map((_, i) => (
+        <PostSkeleton key={i} />
+      ))}
+    </View>
+  );
+}

apps/polycentric/src/features/post/PostSkeleton.tsx

@@ -34,6 +34,7 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
 
   const fallbackUsername = useUsername(identityKey);
   const profile = useProfile(identityKey, { fetchMode: FetchMode.Default });
+
   const username = profile.name ?? fallbackUsername;
 
   const short = identityKey ? shortenIdentityId(identityKey) : '...';
@@ -42,6 +43,8 @@ function ProfileHeaderInner({ bannerColors, onBack }: ProfileHeaderProps) {
     if (identityKey) router.push(Routes.tabs.editProfile(identityKey));
   }, [identityKey]);
 
+  if (profile.isLoading && !profile.name) return undefined;
+
   return (
     <>
       <View style={{ position: 'relative' }}>