How to show the loading indicator in the top status bar
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.
Introduction
On modern iOS, the old global network spinner in the system status bar is no longer available. To show loading state near the top of the screen, you need a custom view that respects safe area, does not block navigation, and is easy to control from async code. A reusable top banner pattern works well across many screens.
Why a Custom Top Indicator Is the Right Pattern
A top indicator is useful when loading affects the whole screen but should still allow users to read content or cancel actions. Compared with full screen blockers, a narrow top banner is less disruptive and gives continuous feedback.
Design guidelines:
- Keep height small so navigation remains visible.
- Use short text such as
LoadingorSyncing. - Animate in and out quickly to avoid visual noise.
- Avoid showing it for ultra short requests to prevent flicker.
In UIKit, this is straightforward with a shared presenter object that owns one banner view per active scene.
Build a Reusable Banner View in UIKit
The view below shows a spinner and message, anchored to the safe area top.
Create a coordinator to show and hide it without duplicating layout code in each controller.
Connect Indicator State to Async Network Work
The most important engineering detail is consistent lifecycle handling. Show before request starts, then hide in every terminal state including success, failure, and cancellation.
defer helps guarantee cleanup, which prevents stuck loading banners when an exception path is missed.
Accessibility and Visual Quality
A loading indicator should be announced clearly for VoiceOver users and should not clash with navigation titles.
Practical checks:
- Verify contrast for banner background and text.
- Test with larger dynamic type sizes.
- Confirm behavior during rotation and split screen.
- Avoid multiple indicators stacking at the top.
If your app has many concurrent requests, consider reference counting in the coordinator so the banner hides only when all tracked operations finish.
Common Pitfalls
- Trying to use removed status bar spinner APIs on modern iOS versions.
- Hiding indicator only on success, leaving it visible after errors.
- Updating UI from a background thread, causing inconsistent state.
- Creating separate banner implementations per screen instead of one shared component.
- Ignoring safe area constraints on devices with dynamic top insets.
Summary
- Implement a custom top loading banner instead of deprecated status bar indicators.
- Keep the component reusable and managed by a coordinator.
- Tie show and hide logic to async lifecycle with guaranteed cleanup.
- Validate accessibility and layout behavior across device states.
- Use one consistent loading pattern across the app for predictable UX.
Related reading
- How to silence a warning in Swift?
- How to simulate Android killing my process?
- How to solve error running pod install in flutter on mac?
- How to solve String interpolation produces a debug description for an optional value; did you mean to make this explicit? in Xcode 8.3 beta?
- How to specify the JDK version in Android Studio?
- How to split filename from file extension in Swift?
- How to split string into substrings on iOS?
- How to start an application using Android ADB tools
.png&w=3840&q=75)
Tackling System Design Interview Problems
A short course that equips you with the skills to approach system design interviews methodically.
Start the free courseTrack what you have practised
A free account saves your progress, solutions and study plan across every problem on Codemia.
Interview Questions practice on Codemia
Over 8,000 real interview questions from top companies, searchable by company and role.