@oxyhq/services 22.8.5 → 22.8.7

package/src/ui/screens/FileManagementScreen.tsx

@@ -9,15 +9,13 @@ import {
     RefreshControl,
     TextInput,
     Image,
-    Animated,
-    Easing,
     AccessibilityInfo,
-    Platform,
     useWindowDimensions,
 } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import type { FileManagementScreenProps } from '../types/fileManagement';
 import { Dialog, toast, useDialogControl } from '@oxyhq/bloom';
+import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import type { FileMetadata } from '@oxyhq/core';
 import { useFileStore, useFiles, useUploading as useUploadingStore, useUploadAggregateProgress, useDeleting as useDeletingStore } from '../stores/fileStore';
@@ -1121,193 +1119,63 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
         </View>
     );
 
-    // Professional Skeleton Loading Component with Advanced Shimmer Effect
-    const SkeletonLoader = React.memo(() => {
-        const shimmerAnim = useRef(new Animated.Value(0)).current;
-        const skeletonContainerWidth = safeContainerWidth;
-
-        useEffect(() => {
-            const shimmer = Animated.loop(
-                Animated.timing(shimmerAnim, {
-                    toValue: 1,
-                    duration: 2000,
-                    easing: Easing.linear,
-                    // Web has no native animated module; forcing the native
-                    // driver there warns and falls back to JS. The shimmer only
-                    // drives a transform, so JS-driving it on web is fine.
-                    useNativeDriver: Platform.OS !== 'web',
-                })
-            );
-            shimmer.start();
-            return () => shimmer.stop();
-        }, [shimmerAnim]);
-
-        // Create a sweeping shimmer effect
-        const shimmerTranslateX = shimmerAnim.interpolate({
-            inputRange: [0, 1],
-            outputRange: [-skeletonContainerWidth * 2, skeletonContainerWidth * 2],
-        });
-
-        const SkeletonBox = ({ width, height, borderRadius = 8, style, delay = 0 }: { width: number | string; height: number; borderRadius?: number; style?: Record<string, unknown>; delay?: number }) => {
-            const delayedTranslateX = shimmerAnim.interpolate({
-                inputRange: [0, 1],
-                outputRange: [-skeletonContainerWidth * 2 + delay, skeletonContainerWidth * 2 + delay],
-            });
-
-            return (
-                <View
-                    style={[
-                        {
-                            width,
-                            height,
-                            borderRadius,
-                            backgroundColor: colors.backgroundSecondary,
-                            overflow: 'hidden',
-                            position: 'relative',
-                        },
-                        style,
-                    ]}
-                >
-                    {/* Base background */}
-                    <View
-                        style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            backgroundColor: colors.backgroundSecondary,
-                        }}
-                    />
-                    {/* Shimmer gradient effect */}
-                    <Animated.View
-                        style={{
-                            position: 'absolute',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: '100%',
-                            transform: [{ translateX: delayedTranslateX }],
-                        }}
-                    >
-                        <View
-                            style={{
-                                width: skeletonContainerWidth,
-                                height: '100%',
-                                backgroundColor: bloomTheme.isDark
-                                    ? 'rgba(255, 255, 255, 0.08)'
-                                    : 'rgba(255, 255, 255, 0.8)',
-                                shadowColor: bloomTheme.isDark ? '#000' : '#FFF',
-                                shadowOffset: { width: 0, height: 0 },
-                                shadowOpacity: 0.3,
-                                shadowRadius: 10,
-                            }}
-                        />
-                    </Animated.View>
-                </View>
-            );
-        };
-
-        // Skeleton file item matching SettingsListItem structure
-        const SkeletonFileItem = ({ index }: { index: number }) => (
-            <View
-                style={[
-                    {
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        paddingHorizontal: 16,
-                        paddingVertical: 12,
-                        backgroundColor: colors.background,
-                        borderBottomWidth: StyleSheet.hairlineWidth,
-                        borderBottomColor: colors.border,
-                    },
-                ]}
-            >
-                {/* Icon/Image skeleton */}
-                <SkeletonBox width={44} height={44} borderRadius={8} delay={index * 50} />
-
-                {/* Content skeleton */}
-                <View style={{ flex: 1, marginLeft: 12, justifyContent: 'center' }}>
-                    <SkeletonBox
-                        width={index % 3 === 0 ? '85%' : index % 3 === 1 ? '70%' : '90%'}
-                        height={16}
-                        style={{ marginBottom: 8 }}
-                        delay={index * 50 + 20}
-                    />
-                    <SkeletonBox
-                        width={index % 2 === 0 ? '50%' : '60%'}
-                        height={12}
-                        delay={index * 50 + 40}
-                    />
-                </View>
-            </View>
+    // Loading state — Bloom's shared `Skeleton` primitives own the shimmer, so
+    // this is pure layout: the top chrome (header / controls / search) plus a
+    // photo grid of shimmering tiles sized with the same 3-per-row geometry the
+    // real photo grid uses. No hand-rolled `Animated` shimmer.
+    //
+    // The image-only picker owns its OWN loading skeleton (rendered by
+    // `PhotoPickerView` when its photo list is still loading), so it inherits the
+    // picker's placement-aware container width / columns / tile size and the
+    // Dialog-vs-bottom-sheet sizing. Skipping the browse chrome here is what keeps
+    // the picker from flashing the wrong (file-manager) skeleton inside the Dialog.
+    if (loading && !isImageOnlyPicker) {
+        const GRID_PADDING = 10;
+        const TILE_GAP = 4;
+        const GRID_COLUMNS = 3;
+        const GRID_ROWS = 6;
+        const tileSize = Math.floor(
+            (safeContainerWidth - GRID_PADDING * 2 - TILE_GAP * (GRID_COLUMNS - 1)) / GRID_COLUMNS,
         );
 
         return (
             <View className="flex-1" style={{ backgroundColor }}>
-                {/* Header Skeleton */}
+                {/* Header */}
                 <View
-                    className="flex-row items-center justify-between px-[16px] py-[12px] relative"
+                    className="flex-row items-center justify-between px-[16px] py-[12px]"
                     style={{ borderBottomColor: colors.border, borderBottomWidth: StyleSheet.hairlineWidth }}
                 >
-                    <SkeletonBox width={44} height={44} borderRadius={12} />
-                    <View className="flex-1 items-center justify-center mx-[16px]">
-                        <SkeletonBox width={140} height={20} style={{ marginBottom: 6 }} />
-                        <SkeletonBox width={100} height={14} />
-                    </View>
-                    <SkeletonBox width={44} height={44} borderRadius={12} />
+                    <Skeleton.Box width={44} height={44} borderRadius={12} />
+                    <Skeleton.Col style={{ alignItems: 'center', marginHorizontal: 16, gap: 6 }}>
+                        <Skeleton.Box width={140} height={20} />
+                        <Skeleton.Box width={100} height={14} />
+                    </Skeleton.Col>
+                    <Skeleton.Box width={44} height={44} borderRadius={12} />
                 </View>
 
-                {/* Controls Bar Skeleton */}
-                <View className="flex-row items-center justify-between px-[12px] py-[12px] gap-[12px]">
-                    <SkeletonBox width={100} height={36} borderRadius={18} />
-                    <SkeletonBox width={44} height={44} borderRadius={22} />
-                </View>
+                {/* Controls bar */}
+                <Skeleton.Row style={{ alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 12, paddingVertical: 12 }}>
+                    <Skeleton.Box width={100} height={36} borderRadius={18} />
+                    <Skeleton.Box width={44} height={44} borderRadius={22} />
+                </Skeleton.Row>
 
-                {/* Search Bar Skeleton */}
-                <View
-                    className="flex-row items-center px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-full gap-[10px]"
-                    style={{ backgroundColor: colors.card }}
-                >
-                    <SkeletonBox width="100%" height={44} borderRadius={12} />
+                {/* Search bar */}
+                <View className="mx-[12px] mb-[12px]">
+                    <Skeleton.Box width="100%" height={44} borderRadius={22} />
                 </View>
 
-                {/* Stats Container Skeleton */}
-                <View
-                    className="flex-row px-[14px] py-[10px] mx-[12px] mb-[12px] rounded-[18px]"
-                    style={{ backgroundColor: colors.card }}
-                >
-                    {[1, 2, 3].map((i) => (
-                        <View key={i} className="flex-1 items-center py-[4px]">
-                            <SkeletonBox width={50} height={20} style={{ marginBottom: 4 }} delay={i * 30} />
-                            <SkeletonBox width={40} height={14} delay={i * 30 + 15} />
-                        </View>
+                {/* Photo grid */}
+                <View style={{ padding: GRID_PADDING, gap: TILE_GAP }}>
+                    {Array.from({ length: GRID_ROWS }, (_, row) => (
+                        <Skeleton.Row key={row} style={{ gap: TILE_GAP }}>
+                            {Array.from({ length: GRID_COLUMNS }, (_, col) => (
+                                <Skeleton.Box key={col} width={tileSize} height={tileSize} borderRadius={6} />
+                            ))}
+                        </Skeleton.Row>
                     ))}
                 </View>
-
-                {/* File List Skeleton - Matching SettingsListItem */}
-                <ScrollView
-                    className="flex-1"
-                    contentContainerClassName="px-[12px] pt-0 pb-[12px]"
-                    showsVerticalScrollIndicator={false}
-                >
-                    <View style={{
-                        backgroundColor: colors.card,
-                        borderRadius: 18,
-                        overflow: 'hidden',
-                        marginTop: 8,
-                    }}>
-                        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
-                            <SkeletonFileItem key={i} index={i} />
-                        ))}
-                    </View>
-                </ScrollView>
             </View>
         );
-    });
-
-    if (loading) {
-        return <SkeletonLoader />;
     }
 
     // Dedicated flagship-style photo picker view used in the avatar-picker
@@ -1335,6 +1203,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     uploadProgress={uploadProgress}
                     hasMore={paging.hasMore}
                     loadingMore={paging.loadingMore}
+                    loading={loading}
                     reduceMotion={reduceMotion}
                     getThumbUrl={thumbSourceFor}
                     primaryColor={colors.primary}

package/src/ui/screens/fileManagement/PhotoPickerSection.tsx

@@ -14,6 +14,7 @@ import {
 import { Image as ExpoImage } from 'expo-image';
 import { Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
 import { BREAKPOINTS } from '@oxyhq/bloom/styles';
+import * as Skeleton from '@oxyhq/bloom/skeleton';
 import type { FileMetadata } from '@oxyhq/core';
 import { computePhotoGridLayout } from './photoGridLayout';
 
@@ -122,6 +123,13 @@ export interface PhotoPickerViewProps {
     uploadProgress: { current: number; total: number } | null;
     hasMore: boolean;
     loadingMore: boolean;
+    /**
+     * Initial-load flag. While `true` AND no photos have arrived yet, the picker
+     * renders its OWN loading skeleton (placement-aware grid of shimmer tiles)
+     * instead of the empty state — so the loading UI matches the picker's shape
+     * and container width, not the browse file-manager chrome.
+     */
+    loading: boolean;
     reduceMotion: boolean;
     getThumbUrl: (file: FileMetadata) => string | undefined;
     primaryColor: string;
@@ -161,6 +169,18 @@ const RING_SPRING_TENSION = 120;
 const CELL_CORNER_RADIUS = 8; // `rounded-radius-8`
 const SELECTION_RING_WIDTH = 3; // `border-[3px]`
 
+/**
+ * Loading-skeleton tile fill. The picker's backdrop is ALWAYS black regardless
+ * of theme, so we cannot use Bloom `Skeleton.Box`'s theme default (`contrast50`,
+ * which is a near-black gray on a dark theme → invisible on this backdrop). A
+ * neutral dark gray reads as a photo placeholder on black; Bloom's shimmer still
+ * pulses the tile opacity on top of it. `Skeleton.Box` applies `style` after its
+ * own base, so this override wins while the animated opacity is preserved.
+ */
+const SKELETON_TILE_COLOR = '#26262A';
+/** Minimum skeleton rows so the grid never looks empty on a very short panel. */
+const SKELETON_MIN_ROWS = 4;
+
 type PhotoPickerCellProps = {
     photo: FileMetadata;
     size: number;
@@ -325,6 +345,7 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     uploadProgress,
     hasMore,
     loadingMore,
+    loading,
     reduceMotion,
     getThumbUrl,
     primaryColor,
@@ -366,14 +387,13 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
     // better below full height); the bottom sheet may run taller. Keep this
     // breakpoint in sync with `DIALOG_PLACEMENT` in BottomSheetRouter.
     const isCenteredPanel = windowWidth >= BREAKPOINTS.md;
-    const rootStyle = useMemo(
-        () => ({
-            maxHeight: isCenteredPanel
-                ? Math.min(Math.round(windowHeight * 0.85), 720)
-                : Math.round(windowHeight * 0.9),
-        }),
+    const maxPanelHeight = useMemo(
+        () => (isCenteredPanel
+            ? Math.min(Math.round(windowHeight * 0.85), 720)
+            : Math.round(windowHeight * 0.9)),
         [isCenteredPanel, windowHeight],
     );
+    const rootStyle = useMemo(() => ({ maxHeight: maxPanelHeight }), [maxPanelHeight]);
 
     const effectiveWidth = gridWidth > 0 ? gridWidth : windowWidth;
     const { columns, cellSize, gutter } = useMemo(
@@ -381,6 +401,18 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
         [effectiveWidth],
     );
 
+    // How many shimmer tiles the loading skeleton renders: enough FULL rows to
+    // fill the panel down to (but never past) its `maxHeight` cap, so the panel
+    // hugs the skeleton content instead of overflowing or scrolling. `floor`
+    // keeps the last row whole; `SKELETON_MIN_ROWS` guards a very short panel.
+    const skeletonTileCount = useMemo(() => {
+        const rowHeight = cellSize + gutter;
+        if (rowHeight <= 0) return columns * SKELETON_MIN_ROWS;
+        const available = Math.max(0, maxPanelHeight - GRID_CONTENT_PADDING_TOP);
+        const rows = Math.max(SKELETON_MIN_ROWS, Math.floor(available / rowHeight));
+        return rows * columns;
+    }, [cellSize, gutter, columns, maxPanelHeight]);
+
     // Map selectedIds → 1-based selection order for the badge. We freeze a
     // stable order at the time of selection: the order is the insertion
     // order of the Set (which JS preserves natively).
@@ -515,7 +547,37 @@ const PhotoPickerView: React.FC<PhotoPickerViewProps> = ({
                 where Yoga already defaults min-height to 0). */}
             <View className="flex-1 min-h-0 bg-black">
                 {/* Photo grid (renders behind the translucent header). */}
-                {isEmpty ? (
+                {isEmpty && loading ? (
+                    /* Loading skeleton — the picker's OWN shape: shimmer tiles laid
+                       out with the SAME placement-aware geometry the real grid uses
+                       (`computePhotoGridLayout(effectiveWidth)`), pushed below the
+                       translucent header by the grid content padding. `flexWrap`
+                       breaks rows exactly at `columns` because the last tile in each
+                       row carries no right margin (a full row + gutters fits the
+                       measured width by construction). The real translucent header
+                       still floats on top, so Cancel stays reachable while loading. */
+                    <View
+                        className="pt-[60px]"
+                        style={{ flexDirection: 'row', flexWrap: 'wrap' }}
+                        pointerEvents="none"
+                        accessibilityElementsHidden
+                        importantForAccessibility="no-hide-descendants"
+                    >
+                        {Array.from({ length: skeletonTileCount }, (_, index) => (
+                            <Skeleton.Box
+                                key={index}
+                                width={cellSize}
+                                height={cellSize}
+                                borderRadius={CELL_CORNER_RADIUS}
+                                style={{
+                                    marginRight: (index + 1) % columns === 0 ? 0 : gutter,
+                                    marginBottom: gutter,
+                                    backgroundColor: SKELETON_TILE_COLOR,
+                                }}
+                            />
+                        ))}
+                    </View>
+                ) : isEmpty ? (
                     <View className="flex-1 items-center justify-center px-space-32 pt-[60px]">
                         <View className="opacity-30 mb-space-16">
                             <MaterialCommunityIcons name="image-outline" size={64} color="#FFFFFF" />

package/src/ui/screens/fileManagement/hooks/useFileUploadState.ts

@@ -6,6 +6,7 @@ import { useFileStore } from '../../../stores/fileStore';
 import type { useUploadFile } from '../../../hooks/mutations/useAccountMutations';
 import { convertDocumentPickerAssetToFile, formatFileSize } from '../../../utils/fileManagement';
 import {
+    createPendingUploadFile,
     type PendingUploadFile,
     type UploadCandidate,
     candidateName,
@@ -52,7 +53,7 @@ export interface UseFileUploadStateResult {
     handleFileUpload: () => Promise<void>;
     handleConfirmUpload: () => Promise<void>;
     handleCancelUpload: () => void;
-    removePendingFile: (index: number) => void;
+    removePendingFile: (id: string) => void;
 }
 
 /**
@@ -305,13 +306,7 @@ export const useFileUploadState = ({
                 }
             }
 
-            processedFiles.push({
-                file,
-                preview,
-                size,
-                name,
-                type: fileType
-            });
+            processedFiles.push(createPendingUploadFile(file, preview, size, name, fileType));
         }
 
         if (processedFiles.length === 0) {
@@ -387,12 +382,13 @@ export const useFileUploadState = ({
         setShowUploadPreview(false);
     };
 
-    const removePendingFile = (index: number) => {
-        const file = pendingFiles[index];
+    const removePendingFile = (id: string) => {
+        const file = pendingFiles.find((pf) => pf.id === id);
+        if (!file) return;
         if (file.preview) {
             URL.revokeObjectURL(file.preview);
         }
-        const updated = pendingFiles.filter((_, i) => i !== index);
+        const updated = pendingFiles.filter((pf) => pf.id !== id);
         setPendingFiles(updated);
         if (updated.length === 0) {
             setShowUploadPreview(false);

package/src/ui/screens/fileManagement/shared.ts

@@ -57,9 +57,32 @@ export const candidateUri = (candidate: UploadCandidate): string | undefined =>
 
 /** A processed file ready for review in the upload preview modal. */
 export interface PendingUploadFile {
+    /** Stable row identity for React keys and removal — survives reorder/filter. */
+    id: string;
     file: UploadCandidate;
     preview?: string;
     size: number;
     name: string;
     type: string;
 }
+
+const createPendingUploadId = (): string =>
+    typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function'
+        ? crypto.randomUUID()
+        : `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+/** Mint a {@link PendingUploadFile} row from a validated upload candidate. */
+export const createPendingUploadFile = (
+    file: UploadCandidate,
+    preview: string | undefined,
+    size: number,
+    name: string,
+    type: string,
+): PendingUploadFile => ({
+    id: createPendingUploadId(),
+    file,
+    preview,
+    size,
+    name,
+    type,
+});