feat: add Spinner component and optimize Skeleton and Button components

apps/docs/src/content/docs/rn-ui/changelog.mdx

@@ -9,10 +9,30 @@ import ChangelogTimeline from '@/components/ChangelogTimeline.astro';
 
 export const releases = [
   {
-    version: 'v0.3.0',
-    date: '2026-08-25',
+    version: 'v0.3.1',
+    date: '2026-09-12',
     tag: 'Latest Feature Release',
     isLatest: true,
+    changes: [
+      {
+        type: 'feat',
+        text: '<strong>Spinner & Loader Components</strong>: Dedicated high-performance loader component with 4 distinct animation variants (<code>circular</code>, <code>ring</code>, <code>dots</code>, <code>bars</code>), customizable speeds, size scales, semantic color tones, and descriptive labels.',
+      },
+      {
+        type: 'perf',
+        text: '<strong>Ultra-Lightweight Skeleton with SkeletonGroup</strong>: Reduced SharedValues by 75%, removed native <code>onLayout</code> bridge listeners, and added <code>SkeletonGroup</code> for synchronized single-clock multi-skeleton screens with zero layout shift and safe unmount cleanup.',
+      },
+      {
+        type: 'fix',
+        text: '<strong>Button & renderIcon Defensive Rendering</strong>: Safeguarded mixed children rendering to prevent un-wrapped text string errors in React Native and added automatic support for React forwardRef components.',
+      },
+    ],
+  },
+  {
+    version: 'v0.3.0',
+    date: '2026-08-25',
+    tag: 'Feature Release',
+    isLatest: false,
     changes: [
       {
         type: 'feat',

apps/docs/src/content/docs/rn-ui/components/index.mdx

@@ -2,12 +2,12 @@
 title: Component Library
 sidebar:
   label: Overview
-description: Complete catalog of all 63 UI components available in @masumdev/rn-ui.
+description: Complete catalog of all 64 UI components available in @masumdev/rn-ui.
 ---
 
 import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
-Browse the complete catalog of 63 production-ready React Native & Expo components in `@masumdev/rn-ui`.
+Browse the complete catalog of 64 production-ready React Native & Expo components in `@masumdev/rn-ui`.
 
 ## Layout & Foundations
 
@@ -109,4 +109,5 @@ Browse the complete catalog of 63 production-ready React Native & Expo component
 <CardGrid>
   <LinkCard title="Progress" href="/rn-ui/components/progress/" description="Progress bar completion indicator." />
   <LinkCard title="Skeleton" href="/rn-ui/components/skeleton/" description="Shimmering skeleton placeholder loader." />
+  <LinkCard title="Spinner" href="/rn-ui/components/spinner/" description="High-performance circular, dual-ring, dots, and bars loading spinners." />
 </CardGrid>

apps/docs/src/content/docs/rn-ui/components/spinner.mdx

@@ -0,0 +1,75 @@
+---
+title: Spinner
+description: High-performance animated loading spinner with circular arc, dual-ring, wave dots, and equalizer bar variants.
+sidebar:
+  badge:
+    text: "New"
+    variant: "tip"
+---
+
+import TypeTable from '@/components/TypeTable.astro';
+
+The **Spinner** component (also exported as `Loader`) provides fluid 60–120fps UI thread loading indicators with 4 distinct animation variants, semantic design tokens, and optional descriptive labels.
+
+## Usage
+
+```tsx
+import React from 'react';
+import { Spinner, Box, Card, Text } from '@masumdev/rn-ui';
+
+export function SpinnerExample() {
+  return (
+    <Box gap="lg">
+      {/* 4 Animation Variants */}
+      <Box row gap="xl" center>
+        <Spinner variant="circular" tone="primary" size="default" />
+        <Spinner variant="ring" tone="accent" size="default" />
+        <Spinner variant="dots" tone="success" size="default" />
+        <Spinner variant="bars" tone="warning" size="default" />
+      </Box>
+
+      {/* Sizes Scale (xs, sm, default, lg, xl) */}
+      <Box row gap="md" center>
+        <Spinner size="xs" tone="primary" />
+        <Spinner size="sm" tone="primary" />
+        <Spinner size="default" tone="primary" />
+        <Spinner size="lg" tone="primary" />
+        <Spinner size="xl" tone="primary" />
+      </Box>
+
+      {/* Spinner with Descriptive Label */}
+      <Spinner
+        variant="ring"
+        tone="primary"
+        size="lg"
+        label="Synchronizing data..."
+        labelPlacement="bottom"
+      />
+    </Box>
+  );
+}
+```
+
+## Variants
+
+- **`circular`**: Classic high-performance SVG arc with background track ring.
+- **`ring`**: Elegant dual concentric rings with counter-rotating inner arc.
+- **`dots`**: Three phase-shifted pulsing wave dots.
+- **`bars`**: Four vertical soundwave equalizer bars.
+
+## Props API
+
+<TypeTable
+  type={{
+    variant: { type: "'circular' | 'ring' | 'dots' | 'bars'", default: "'circular'", description: 'Visual animation structure style.' },
+    size: { type: "'xs' | 'sm' | 'default' | 'lg' | 'xl' | number", default: "'default'", description: 'Predefined size scale (16px, 22px, 32px, 44px, 58px) or custom numeric diameter.' },
+    tone: { type: "'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'default'", default: "'primary'", description: 'Semantic color palette from design tokens.' },
+    speed: { type: "'slow' | 'normal' | 'fast' | number", default: "'normal'", description: 'Animation cycle duration (slow=1400ms, normal=850ms, fast=550ms, or custom ms).' },
+    strokeWidth: { type: 'number', default: 'Auto', description: 'Custom ring stroke thickness for circular/ring variants.' },
+    label: { type: 'string', default: 'undefined', description: 'Optional descriptive label text next to or below the spinner.' },
+    labelPlacement: { type: "'bottom' | 'right' | 'top' | 'left'", default: "'bottom'", description: 'Placement of the descriptive label.' },
+    trackColor: { type: 'string', default: 'colors.backgroundSubtle', description: 'Custom background circle track color.' },
+    color: { type: 'string', default: 'undefined', description: 'Direct color override, bypassing semantic tone mapping.' },
+    animated: { type: 'boolean', default: 'true', description: 'Controls whether the animation loop is running.' },
+  }}
+/>

apps/native/app/rn-ui/[id].tsx

@@ -64,6 +64,7 @@ import {
   SegmentedControlSection,
   ChipSection,
   SignaturePadSection,
+  SpinnerSection,
 } from "../../components/rn-ui";
 
 export default function RnUiComponentDetailScreen() {
@@ -210,6 +211,9 @@ export default function RnUiComponentDetailScreen() {
         return <ChipSection ctx={ctx} />;
       case "signature-pad":
         return <SignaturePadSection ctx={ctx} />;
+      case "spinner":
+      case "loader":
+        return <SpinnerSection ctx={ctx} />;
 
       default:
         return <ButtonsSection ctx={ctx} />;

apps/native/app/rn-ui/index.tsx

@@ -431,6 +431,13 @@ export const CATALOG_CATEGORIES: ComponentCategory[] = [
         description: "Content loading placeholder animation.",
         tone: "primary",
       },
+      {
+        id: "spinner",
+        name: "Spinner",
+        description:
+          "High-performance circular, dots, bars, and dual-ring loader spinners.",
+        tone: "primary",
+      },
       {
         id: "avatar",
         name: "Avatar",

apps/native/components/rn-ui/index.ts

@@ -56,4 +56,4 @@ export { SwipeableItemSection } from './sections/SwipeableItemSection';
 export { SegmentedControlSection } from './sections/SegmentedControlSection';
 export { ChipSection } from './sections/ChipSection';
 export { SignaturePadSection } from './sections/SignaturePadSection';
-
+export { SpinnerSection } from './sections/SpinnerSection';