What are affordances, and how do loading, error, and empty states help users trust the UI?

An affordance is a visual clue that something can be used: a text field looks tappable, a button looks like a button. States are what happens in each phase: default, hover, focus, active, disabled, loading, and error. Good products show spinners or skeletons while data loads, a clear error with recovery when something fails, and a helpful empty state the first time a list is empty. Silence after a click - no loading, no error - is where users think the app is broken. Match copy to the situation: a generic 'Something went wrong' is better than nothing, and best with a next step.

{isLoading ? <Skeleton /> : error ? <ErrorBanner retry={refetch} /> : items.length ? <List /> : <EmptyCta />}

Start simple: try this concept in a tiny project before moving to advanced tools.