Difficulty in getting reflex events to update added lines

[factor3]

I have a reflex- based application with an auto_scroll component that updates whenever a line of text is entered into an input component. The code for this is below:

import time

import reflex as rx
import asyncio

from reflex import Component

from rxconfig import config

class State(rx.State):
    lines = []

    async def add_other_line(self):
        await asyncio.sleep(10)
        self.lines.append("Added a line!\n")


    async def add_line(self,newline:dict):
        self.lines.append(newline["lineinput"] + "\n")
        asyncio.create_task(self.add_other_line())
        yield

def line(aline) ->rx.Component:
    return rx.text(aline)

def index() -> rx.Component:
    return rx.container(
        rx.color_mode.button(position="top-right"),
        rx.form(
            rx.vstack(
                rx.auto_scroll(
                    rx.foreach(State.lines,line),
                    width="50%",
                    height="70vh",
                    margin="auto",
                    border="1px solid red",
                ),
                rx.hstack(
                    rx.input(placeholder="Enter a line",name="lineinput"),
                    rx.button("Enter"),
                    margin="auto",
                )
            ),
            reset_on_submit=True,
            on_submit=State.add_line,
        )
    )

app = rx.App()
app.add_page(index)

What I would like this application to do is to immediately add a line to the auto_scroll component when the line is entered into the input and the "Enter" button is clicked on. Then, after 10 seconds, it should add "Added a line" into the auto_scroll component.

Unfortunately, the current code doesn't work that way. The auto_scroll component does not update until the add_line() method returns. Consequently, I cannot seem to get it to update after the add_another_line() method returns.

I have looked at several applications that update a display when a form is submitted, perform network operations, then update the display with the results of those operations. I know that it is possible to make my application do what I want it to do, I just don't knopw how to do it. Unfortunately, I don't have access to the source code for those applications, so I have no way to see how it is done.

Can someone tell me how to make my application update my auto_scroll component immediately when I enter a new line, then update it again when the "Added a line" text is added 10 seconds later?

Thanks in advance for any suggestions.