<div
    x-data="{
        show_loading: false,
        show_reading: true,
        show_typing: false,
        init() {
            this.response_message.render_outer($refs.loading_response_message)

            setTimeout(() => this.show_loading = true, 100)
            setTimeout(() => this.show_reading = false, 1000)
            setTimeout(() => this.show_typing = true, 1000)
        },
        response_message: new ViewGlue(
            '{% url "django_spire:ai:chat:render:response_message" %}',
            {
                message_body: '{{ body|escapejs }}',
                chat_id: '{{ chat_id }}'
            }
        )
    }"
    x-show="show_loading"
    x-transition
>
    <div x-ref="loading_response_message" x-init="$el.scrollIntoView()" class="row mt-2">
        <div class="col-auto align-self-center">
            <div class="row align-items-center">
                <div class="col-auto spinner-border text-app-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <div class="col fw-semibold">
                    <span x-show="show_reading">Reading...</span>
                    <span x-show="show_typing">Typing...</span>
                </div>
            </div>
        </div>
        <div class="col">
        </div>
    </div>

</div>
