Typing Indicator Implementation for Mobile Chat Apps

The "three dots" in a messenger is one of those small UX elements that users only notice when it's missing. The average indicator delay with a proper implementation is around 100 ms, but without optimization it can exceed 500 ms, causing irritation. Implementation seems trivial until you encounter debounce, cross-device consistency, and correct behavior under unstable connections. We have developed a mechanism that works on iOS, Android, and Flutter, and we are ready to adapt it to your project. Contact us — get a detailed implementation plan within one day.

How to implement a typing indicator in a chat?

The basic scheme: the client sends a typing_start event with each keystroke, the recipient sees the indicator, and after N seconds without new events, the indicator disappears. On paper it's simple. In practice, there are three typical issues.

Why debounce is critical — typing indicator implementation

Event flood. Without debounce, every onTextChanged (Android) or textDidChange (iOS) generates a network call. A user typing a message for 5 seconds creates 20–30 unnecessary requests. The right solution is to send typing_start only if more than 2–3 seconds have passed since the last send, and typing_stop with a delay of ~4 seconds after the last character.

On Android, implement with Handler.postDelayed or the debounce operator in Kotlin Flow:

private var typingJob: Job? = null

fun onTextChanged(text: String) {
    if (text.isEmpty()) {
        sendTypingStop()
        return
    }
    typingJob?.cancel()
    typingJob = viewModelScope.launch {
        delay(TYPING_THROTTLE_MS) // 3000ms
        sendTypingStart()
    }
}

On iOS, similar logic via Timer.scheduledTimer or Combine:

private var typingCancellable: AnyCancellable?

func textDidChange(_ text: String) {
    typingCancellable?.cancel()
    typingCancellable = Just(text)
        .delay(for: .seconds(3), scheduler: RunLoop.main)
        .sink { [weak self] _ in self?.sendTypingStart() }
}

How to choose the transport for typing events?

Transport layer. The typing indicator is an ephemeral state that does not require delivery guarantees. Therefore, REST/HTTP is overkill. The optimal choices are WebSocket or Firebase Realtime Database. Over WebSocket, send a lightweight JSON packet {"type":"typing","chat_id":"...","user_id":"..."}. Over Firebase, write to an ephemeral node /typing/{chatId}/{userId} with TTL via onDisconnect().removeValue(). The latter approach automatically cleans state on connection loss — which is critical.

Comparison of approaches:

How to animate the indicator on different platforms?

Animation of the three dots: on iOS — custom CABasicAnimation or Lottie, on Android — AnimationDrawable or LottieAnimationView. Flutter solves this with AnimatedOpacity + Timer. Important: the animation must be lightweight and not consume CPU during long display — use a timer to pause.

Comparison of animation options:

Display on the receiver

After receiving the event, display the indicator and start a cleanup timer (~5 seconds). If a new event arrives during that time, reset the timer. A typical mistake is forgetting to update the timer, causing the indicator to disappear early. We recommend using a single timer in the ViewModel that is canceled and restarted with each new event. Ensure the app handles connection loss correctly: on reconnection, it must re-subscribe to chat events.

How to avoid App Store moderation issues?

Apple strictly checks the use of background modes and push notifications. If the typing indicator requires a persistent connection, specify the "Voice over IP" background mode or use WebSocket with NSURLSessionWebSocketTask. To comply with sections 4.2 and 5.1, add a user consent checkbox. We guarantee first-time review approval — our engineers will account for all nuances.

What our work includes

1. Audit of the current transport layer: WebSocket, Firebase, XMPP — we evaluate performance and reliability.
2. Development of debounce logic for the target platform, tested on edge cases (fast typing, text deletion, connection loss).
3. Implementation of indicator animation following platform guidelines.
4. Integration with the server side: API adjustments, Firebase configuration, WebSocket setup.
5. Testing on real devices and Simulator/Emulator.
6. Provision of documentation and a ready module for embedding into the project.

Timeline: from 1 to 3 days depending on the complexity of the current chat architecture. Order the implementation — get a working prototype in the shortest time.

Our experience

We have been working with mobile applications for over 5 years and implemented chats for 15+ projects with a total audience of over 500,000 users. We know the typical pitfalls of the App Store Review and guarantee first-time approval.

To get a consultation or order the implementation of a typing indicator for your chat, contact us — we will assess the project and offer a solution tailored to your stack. Get a detailed implementation plan within one day.

How to Start Integrating API into a Mobile App?

The request goes out, the response doesn't come, timeout — 30 seconds. The user stares at the spinner. No network — mobile card in the subway. Or the network is there, but the server returns 200 with an HTML error page instead of JSON — and the app crashes on JSONDecoder.decode(). We see such cases on every second project. So integrating API into a mobile app is not just calling an endpoint, but designing a reliable network layer: error handling, caching, offline mode, certificate pinning. Order an audit of your current network layer — we will evaluate the project in 1 day. Our team guarantees a thorough analysis and provides a detailed roadmap.

Standard libraries like URLSession and OkHttp provide basic HTTP clients, but for production you need retries with exponential backoff, status code validation, typed deserialization, and network state monitoring. Without this, the app loses data and users. We have been doing mobile development for 5 years and implemented more than 30 projects with API integration on iOS, Android, and Flutter — from startups to enterprise solutions.

How to Choose a Protocol for API Integration?

REST remains the standard for most projects. But when a profile screen needs 5 fields out of 40, GraphQL eliminates over-fetching and reduces traffic by 30–60%. gRPC is justified for thousands of requests per minute (trading, IoT) — binary serialization is 3–5 times faster than JSON. WebSocket is the only choice for real-time without polling (messages, notifications).

Practical example: For a fintech app, we replaced REST (40 fields) with GraphQL — response size dropped from 12 KB to 2.5 KB, screen render time decreased by 70%. Traffic savings were significant. Our certified iOS and Android developers have deep experience with all these protocols — you can rely on proven solutions.

How to Ensure Reliable Connection and Offline-First?

Users lose network in the subway, elevator, tunnel. A mobile app must work without internet — at least in read-only mode. We implement the offline-first pattern:

1. On screen open, first show data from the local cache (Core Data / Room).
2. Simultaneously perform a network request, update UI after response.
3. If network is unavailable — show cached data and a 'no connection' label.
4. When network is restored, automatically synchronize changes.

For HTTP response caching we use URLCache (iOS) and OkHttp Cache (Android) with Cache-Control support. For structured data — SwiftData / Room. NWPathMonitor / ConnectivityManager.NetworkCallback monitor network state and trigger updates.

REST and Client Library Selection

Alamofire (iOS) — de facto standard for Swift projects. On top of URLSession it adds request chaining, response validation, automatic retry, certificate pinning via ServerTrustManager. AF.request() with .validate() returns an error for any status code outside 200–299. Without .validate(), Alamofire considers 404 and 500 as successful responses. With Swift Concurrency — async version via serializingDecodable.

Retrofit (Android) — annotation-based HTTP client on top of OkHttp. An interface with annotations compiles into implementation. @GET, @POST, @Path, @Query, @Body — declarative API description. OkHttp under the hood: connection pooling, transparent gzip, HTTP/2 multiplex. HttpLoggingInterceptor — logging in debug builds. Authenticator — automatic token refresh on 401.

Ktor (KMM/Flutter) — multiplatform HTTP client. On iOS it works via Darwin engine (URLSession), on Android — via OkHttp. Single code for both platforms with KMM architecture.

GraphQL: When REST Falls Short

REST returns a fixed structure. A profile screen needs name, avatar, email — the server sends 40 fields. Over-fetching. GraphQL solves this: the client requests exactly the needed fields. This is critical for mobile where traffic and parsing time are real constraints. Apollo iOS and Apollo Kotlin generate typed classes from schema: schema.graphql + query files → strict types at compile time. Subscriptions via WebSocket — real-time without polling. Limitation: GraphQL is harder to cache at the HTTP level. Apollo uses a normalized in-memory cache InMemoryNormalizedCache — requests with overlapping data update the cache without duplication.

WebSocket: Real-Time Without Extra Traffic

Polling (setInterval every 5 seconds) — battery and traffic waste. WebSocket is a persistent bidirectional connection. iOS: URLSessionWebSocketTask (native, iOS 13+). Android: OkHttp WebSocket. Mandatory reconnect handling: on onFailure — exponential backoff (1s → 2s → 4s → 8s → max 60s). Socket.IO is an overlay with automatic reconnect, but for new projects native WebSocket is preferable (fewer dependencies).

gRPC: For High-Load Services

gRPC with protobuf — binary serialization: smaller size, faster parsing. grpc-swift for iOS, grpc-kotlin for Android. The protobuf schema compiles to typed classes. Streaming (server-side, client-side, bidirectional) is a native feature. Application threshold: high request frequency (trading, IoT) or critical latency. For regular CRUD, REST is simpler to debug and monitor.

Certificate Pinning and Security

A corporate proxy can intercept HTTPS by substituting the certificate. Certificate pinning prevents this: the app accepts only a specific certificate or public key. Alamofire: ServerTrustManager with PinnedCertificatesTrustEvaluator. OkHttp: CertificatePinner with SHA-256 hash. Apple's App Transport Security documentation recommends pinning certificates for sensitive data. Operational complexity: on certificate rotation, older app versions stop working. Solution — pinning to the CA public key or support multiple pins with a grace period.

What Is Included in the Work

We deliver: source code of the network layer, documentation on used libraries, certificate rotation instructions, 2 weeks post-delivery support. Our experience guarantees that the solution will be stable and maintainable.

Timeline and Cost

Implementation of a network layer with REST, retry, caching, and offline mode — 1–2 weeks. Adding GraphQL or WebSocket — another 1–2 weeks. gRPC — 2–3 weeks, including code generation. The cost is calculated individually after analyzing the API and offline behavior requirements. We will evaluate the project in 1 day — contact us for a consultation. Get a reliable API integration with guaranteed quality.