webf-async-rendering

What problem does it solve?

WebF's asynchronous rendering batches DOM changes, causing element measurements to return zeros or stale values if read before layout. This Skill teaches you to wait for the onscreen lifecycle before reading layout data, ensuring accurate dimensions and computed styles.

Core Features & Use Cases

• Wait for onscreen events before reading getBoundingClientRect or computed styles.
• Use the useFlutterAttached React hook to run code after layout.
• Handle cleanup with offscreen to release resources when elements are removed.
• Ideal for measuring dynamic content, tooltips, and complex layouts that render in frames.

Quick Start

Create or select an element, append it to the DOM, and attach a one-time onscreen listener; once fired, read dimensions and proceed with layout-dependent logic. In React, adopt useFlutterAttached to run a callback after the element has been laid out.