reactive-ui-patterns

What problem does it solve?

This Skill addresses the jarring user experience caused by full page reloads or content disappearing during data updates in web applications. It provides patterns to ensure smooth, in-place UI updates, preserving scroll position and component state, making your application feel instant and responsive.

Core Features & Use Cases

• Smooth In-Place Updates: Prevents page jumps and content flashes by retaining previous data during refreshes using the .current property.
• Optimized Loading States: Displays subtle loading indicators (e.g., opacity changes) instead of full spinners, keeping content accessible and interactive during data fetches.
• Preserves User Context: Maintains scroll position, form input values, and component state during data reloads, ensuring a seamless user flow.
• Use Case: Implement an inline editing feature for a list of contacts. When a user saves an edit, the list updates instantly without the page jumping or the edit form resetting, providing a seamless experience.

Quick Start

Store your data query in a variable, like const data_query = get_data();. Access the data using data_query.current to keep content visible during refreshes. Show a full loading spinner only when data_query.loading is true AND data_query.current is undefined (initial load). Add class:opacity-60={data_query.loading} to your content container for subtle loading indication during subsequent refreshes.