能不能帮我加一个等待的效果，这是个聊天页面，每次聊天如果系统响应慢的话，我想在聊天记录上加个loading的圆圈或者什么东西，等待消息回复，这个效果该怎么做，给我写一下，比如我每次发消息就会延迟两秒<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Chat</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/theme-chalk/index.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.23.0/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.6/index.js"></script>
    <style>
        body {
            background: linear-gradient(135deg, #000000 0%, #5b2877 100%);
            font-family: 'Arial', sans-serif;
        }
        .chat-container {
            display: flex;
            height: 100vh;
            width: 100%;
        }
        .user-list {
            width: 100%;
            max-width: 300px;
            border-right: 1px solid #f0f0f0;
        }
        .chat {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 20px 10px;
        }
        .chat-main {
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px;
        }
        .user-list, .el-input {
            background: #3f3f70;
        }
        .el-timeline::before {
            background: #20a0ff;
        }
        .el-timeline-item__timestamp {
            color: #20a0ff;
        }
        .message-card {
            background: #ffffff;
            border-radius: 10px;
            padding: 10px;
            margin-bottom: 10px;
            box-shadow: 0px 2px 7px 2px rgba(0, 0, 0, 0.1);
        }
        @media screen and (max-width: 600px) {
            .user-list {
                display: none;
            }
        }
    </style>
</head>
<body>
<div id="app">
    <el-container class="chat-container">
        <el-aside class="user-list">
            <el-menu :default-active="activeUser" @select="handleChangeUser" mode="vertical" background-color="#3f3f70" text-color="#f1f1f1" active-text-color="#18388f">
                <el-menu-item v-for="user in users" :index="user.id">
                    <i class="el-icon-message"></i>
                    <span>{{ user.name }}</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main class="chat">
            <div class="chat-main">
                <el-timeline>
                    <el-timeline-item v-for="msg in activeChatRecord" :timestamp="msg.time">
                        <div class="message-card">
                            <strong>{{ msg.user }}:</strong> {{ msg.content }}
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </div>
            <el-input type="textarea" v-model="input"></el-input>
            <el-button type="primary" @click="sendMessage">发送</el-button>
        </el-main>
    </el-container>
</div>
<script>
    new Vue({
        el: '#app',
    data() {
        return {
            input: '',
        activeUser: '1',
        users: [
            { id: '1', name: '用户1' },
        { id: '2', name: '用户2' },
        { id: '3', name: '用户3' }
    ],
        chatRecord: {
            1: [
                { user: '用户1', content: '你好', time: '2021-01-01 10:30' },
            { user: '我', content: '你好', time: '2021-01-01 10:31' }
        ],
            2: [
                { user: '用户2', content: '你好', time: '2021-01-01 10:32' },
        ],
        },
    };
    },
    computed: {
        activeChatRecord() {
            return this.chatRecord[this.activeUser] || [];
        },
    },
    methods: {
        handleChangeUser(activeIndex) {
            this.activeUser = activeIndex;
        },
        sendMessage() {
            if (!this.input) return;

            this.activeChatRecord.push({ user: '我', content: this.input, time: new Date().toLocaleTimeString() });
            this.input = '';
        },
    },
    });
</script>
</body>
</html>