Loading and error states in React Native - UI Render Trace

Component - Loading and error states

This component shows how a mobile app screen handles loading data and errors. It displays a loading spinner while waiting, shows the data when ready, or an error message if something goes wrong.

Widget Tree

View
├─ ActivityIndicator
├─ Text (Data or Error message)
└─ Button (Retry)

The main container is a View holding three children: an ActivityIndicator spinner for loading, a Text element that shows either the loaded data or an error message, and a Button to retry loading if there was an error.

Render Trace - 4 Steps

Step 1: View

Step 2: ActivityIndicator

Step 3: Text

Step 4: Button

State Change - Re-render

Trigger:Data fetch completes with error

Before

loading: true, error: null, data: null

→

After

loading: false, error: 'Network error', data: null

Re-renders:Entire component re-renders to hide spinner, show error text, and enable retry button

UI Quiz - 3 Questions

What does the ActivityIndicator show when loading data?

A A static image

B A spinning circle to indicate loading

C An error message

D A button to retry

Key Insight

Showing clear loading and error states helps users understand what the app is doing. Using a spinner for loading and a message with a retry button for errors creates a friendly and responsive experience.