How to improve API response handling within Bubble.io pages: Step-by-Step Guide

Select your page and add a Custom State called is_loading of type yes/no with default value no. Create a Group element containing a loading spinner (use a GIF image or an animated icon). On this group's Conditional tab, add: When page's is_loading is no → This element is visible: no. In the workflow that triggers your API call, add as the first action: Set state of page → is_loading = yes. After the API call action completes, add: Set state of page → is_loading = no. The loading group shows while the API is processing and hides when data arrives.

Add another Custom State on the page called api_error of type text (default empty). Create a Group element for error display with a red background, containing a Text element showing page's api_error and a Retry button. Set this group's condition: When page's api_error is empty → visible: no. In your API call workflow, the Toolbox plugin's Run javascript action or the API Connector's error handling lets you detect failures. If using API Connector as an action with 'Include errors in response' checked, add a condition after the call: Only when Result of step X's status_code is not 200 → Set state api_error = 'Unable to load data. Please try again.' When the call succeeds, set api_error back to empty.

Instead of calling the API every time a user visits the page, store the response in a Custom State. Add a Custom State called cached_data of the appropriate type (matching your API response structure). In your API call workflow, after a successful call, add: Set state of page → cached_data = Result of step X. Then set your display elements' data source to page's cached_data instead of directly to the API call. Add a condition on the Page is loaded event: Only when page's cached_data is empty — this skips the API call if data is already cached from a previous interaction on the same page session.

Add a Refresh button (or icon) near your data display area. Create a workflow: When Refresh button is clicked → Set state is_loading = yes → Set state api_error = empty → Call the API action → Set state cached_data = Result of step 3 → Set state is_loading = no. This clears any existing error, shows the loading indicator, fetches fresh data, and updates the cache. You can also add automatic refresh using a 'Do when condition is true' event set to run every X seconds — but be careful with this approach as it consumes API calls and Workload Units continuously.

When an API returns complex nested data, some fields may be empty or missing. For each display element, add fallback text using the :default operator or a condition. For example, a Text element showing api_data's description should have a condition: When api_data's description is empty → change text to 'No description available.' For images, set a static fallback image that shows when the dynamic API image URL is empty. For Repeating Groups bound to API list data, add a condition: When the list count is 0 → show a 'No results found' message in a separate Text element.