Optimistic UI & Bundle Optimization

Major Changes

This release introduces optimistic UI updates and achieves massive bundle size reduction while adding a new headless package for maximum flexibility.

🔧 Fixes & Improvements

@c15t/react@1.1.2

Improved UX responsiveness for banner and dialog interactions:

• UI now updates immediately on user interaction (e.g., closing modals, accepting/rejecting consent), with consent saved in the background
• This ensures a smoother experience, especially on slower connections or when network requests are delayed

Improved event handling for ConsentButton:

• Rewritten logic to separate UI updates from consent persistence
• Custom onClick handlers now receive the full MouseEvent, enabling better control and integration

Cleaner store logic:

• Refactored setShowPopup and saveConsents methods to better separate UI vs network logic
• More consistent behavior around locale changes and popup visibility

c15t@1.0.5

⚙️ Under the Hood:

• Improved consent flow by decoupling UI updates from async network calls — UI now responds instantly, with API sync happening in the background
• Fixed an edge case where popup visibility or dialog state could behave inconsistently due to dependency timing
• Minor cleanup and better error handling in consent persistence logic

🚀 Performance Revolution

Bundle Size Optimization

• MASSIVE: Reduced package size from 84.2 kB → 34.6 kB (gzip) — a 58.9% reduction
• Removed framer-motion dependency for lighter bundle
• Replaced Tailwind variants with native transitions and utility classes
• Zero compromise on UX while achieving faster load times

🧠 New Headless Package

@c15t/react/headless

• NEW: Introduced @c15t/react/headless for teams who need full UI control
• Ultra-lightweight: Only 12.5 kB (gzip) footprint
• Perfect for custom implementations and design systems
• Complete access to consent logic without built-in UI components

✨ What's Changed

• feat: Optimistic UI updates by @BurnedChris in #184

Full Changelog: 1.1.1...1.1.2

📋 Implementation Details

Optimistic Consent Flow

// Optimistic consent flow
const handleConsent = async (choice) => {
  // 1. Update UI immediately (optimistic)
  updateUIState(choice);
  
  // 2. Save to backend (background)
  try {
    await saveConsent(choice);
  } catch (error) {
    // 3. Revert UI if needed
    revertUIState();
  }
};

Enhanced Event Handling

<ConsentButton 
  onClick={(event: MouseEvent) => {
    // Full access to mouse event
    // Custom logic before/after consent handling
    handleCustomAnalytics(event);
  }}
>
  Accept Cookies
</ConsentButton>

🧪 Testing

Test Plan

✅ Scenario 1: Clicking the "Accept All" button on cookie banner

• Expected: Banner immediately disappears, consent is saved in the background

✅ Scenario 2: Testing on slow networks

• Using Chrome DevTools to simulate slow 3G connection
• Expected: UI updates immediately regardless of network speed

Edge Cases

• Error handling: If the network request fails, the UI is already updated, and errors are logged
• Performance: Significant improvement in perceived performance on all device types

This release makes c15t leaner, faster, and more flexible than ever while maintaining full backward compatibility and enhancing the user experience through optimistic UI updates.