Background

I was integrating internal machine learning features to our official account bot, specifically STT and OCR services. The long pending time may cause confusion and uncertainty to the user. Adding a loading animation can help to improve the user experience.

API Guide

We can add a loading animation via sending a request. Here is an example from API doc using curl:

1
2
3
4
5
6
7

curl -v -X POST https://api.line.me/v2/bot/chat/loading/start \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer {channel access token}' \
-d '{
    "chatId": "U4af4980629...",
    "loadingSeconds": 5
}'

Channel Access Token

The channel access token can be found in the

LINE Developer Console > Console Home > Your Channel(needs to be Messaging API) > Messaging API

and scroll to the bottom alt text

ChatID

The chatID is in fact the userID. When someone sends a message to your LINE Official Account, LINE sends the webhook to your bot server. The ID is included in the webhook payload.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

{
    "destination": "U80xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "events": [
        {
            "type": "message",
            "message": {
                "type": "text",
                "id": "522...",
                "quoteToken": "88ZZMsqHVtJH......",
                "text": "你好\n"
            },
            "webhookEventId": "${webhookEventId}",
            "deliveryContext": {
                "isRedelivery": false
            },
            "timestamp": 1723009635825,
            "source": {
                "type": "user",
                "userId": "U31e......"
            },
            "replyToken": "${replyToken}",
            "mode": "active"
        }
    ]
}

Loading Seconds

The loadingSeconds is the duration of the loading animation. The maximum value is 60 seconds.

Calling the API

We can call the API in Java using this example code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

private OkHttpClient client = new OkHttpClient();

private void startLoadingAnimation(String userId, int seconds) {
    String payload = String.format("{\"chatId\":\"%s\",\"loadingSeconds\":%d}", userId, seconds);
    String channelAccessToken = ${channel access token};
    
    RequestBody body = RequestBody.create(payload, JSON);
    Request request = new Request.Builder()
        .url("https://api.line.me/v2/bot/chat/loading/start")
        .post(body)
        .addHeader("Authorization", "Bearer " + channelAccessToken)
        .build();
    
    try (Response response = client.newCall(request).execute()) {
        if (response.code() != 202) {
            log.error("Failed to start loading animation: {}", response.body().string());
        }
    } catch (Exception e) {
        e.printStackTrace();
    }
}

Reference

LINE Messaging API official doc