Article Loaders

1import React, { useEffect, useRef } from 'react';
2import { View, StyleSheet, Animated, ViewStyle, DimensionValue, Easing, Dimensions } from 'react-native';
3import { LinearGradient } from 'expo-linear-gradient';
4
5const SCREEN_WIDTH = Dimensions.get('window').width;
6
7interface BaseProps {
8    width?: DimensionValue;
9    height?: DimensionValue;
10    borderRadius?: number;
11    style?: ViewStyle;
12}
13
14// --- UPDATED ENGINE (2-Second Cycle) ---
15const SkeletonBase = ({ width, height, borderRadius = 8, style }: BaseProps) => {
16    const sheenAnim = useRef(new Animated.Value(0)).current;
17
18    useEffect(() => {
19        Animated.loop(
20            Animated.timing(sheenAnim, {

import React from 'react';
import { StyleSheet, ScrollView, View, Text, SafeAreaView } from 'react-native';
import {
    SkeletonNewsItem,
    SkeletonGridItem,
    SkeletonChatThread,
    TypingLoader,
    GlobalLoadingBar
} from './components/ArticleLoader';

export default function App() {
    return (
        <SafeAreaView style={styles.safe}>
            {/* 5. Global Top Bar */}
            <GlobalLoadingBar />

            <ScrollView contentContainerStyle={styles.container}>

                {/* 4. Typing Indicator */}
                <Section title="Typing Indicator">