How to use the LoadingIndicator?

[TomJGooding]

Sorry if this seems like a basic question, but how do you actually use the LoadingIndicator in an app while data is being loaded?

Just to take the example of the DataTable in the docs as a simple example, imagine that the data took some time to load as it was being pulled from a API or similar.

Many thanks in advance for any advice!

[willmcgugan]

If you make the DataTable and LoadingIndicator the same size, you can start off with the indicator visible and the datatable invisible. Then when the data has loaded, you switch the two.

Thinking about it, this could probably use a helper widget. Some container with a loading boolean.

[TomJGooding]

Thanks Will for your help. Sorry but I'm still not clear how you would display the LoadingIndicator while the data is being loaded. How would you adapt this example of a TableApp for instance?

import time

from textual.app import App, ComposeResult
from textual.widgets import DataTable, LoadingIndicator


def load_data() -> list[tuple]:
    time.sleep(3)  # Simulate time to load the data

    data: list[tuple] = [
        ("lane", "swimmer", "country", "time"),
        (4, "Joseph Schooling", "Singapore", 50.39),
        (2, "Michael Phelps", "United States", 51.14),
        (5, "Chad le Clos", "South Africa", 51.14),
        (6, "László Cseh", "Hungary", 51.14),
        (3, "Li Zhuhao", "China", 51.26),
        (8, "Mehdy Metella", "France", 51.58),
        (7, "Tom Shields", "United States", 51.73),
        (1, "Aleksandr Sadovnikov", "Russia", 51.84),
        (10, "Darren Burns", "Scotland", 51.84),
    ]
    return data


class TableApp(App):
    def compose(self) -> ComposeResult:
        yield LoadingIndicator()
        yield DataTable()

    def on_mount(self) -> None:
        data = load_data()

        table = self.query_one(DataTable)
        rows = iter(data)
        table.add_columns(*next(rows))
        table.add_rows(rows)


app = TableApp()
if __name__ == "__main__":
    app.run()

[willmcgugan]

Try this...

You will probably need the v0.19.1 which has a fix for data table refreshing.

import asyncio


from textual import work
from textual.app import App, ComposeResult
from textual.widgets import DataTable, LoadingIndicator


class TableApp(App):
    def compose(self) -> ComposeResult:
        yield LoadingIndicator()
        yield DataTable()

    def on_mount(self) -> None:
        table = self.query_one(DataTable)
        table.display = False
        self.load_data()

    @work
    async def load_data(self):
        await asyncio.sleep(3)  # Simulate time to load the data

        data: list[tuple] = [
            ("lane", "swimmer", "country", "time"),
            (4, "Joseph Schooling", "Singapore", 50.39),
            (2, "Michael Phelps", "United States", 51.14),
            (5, "Chad le Clos", "South Africa", 51.14),
            (6, "László Cseh", "Hungary", 51.14),
            (3, "Li Zhuhao", "China", 51.26),
            (8, "Mehdy Metella", "France", 51.58),
            (7, "Tom Shields", "United States", 51.73),
            (1, "Aleksandr Sadovnikov", "Russia", 51.84),
            (10, "Darren Burns", "Scotland", 51.84),
        ]

        self.query_one(LoadingIndicator).display = False
        table = self.query_one(DataTable)
        table.display = True

        rows = iter(data)
        table.add_columns(*next(rows))
        table.add_rows(rows)

        return data


app = TableApp()
if __name__ == "__main__":
    app.run()

[TomJGooding]

Thanks Will. This works after upgrading to the latest version (v0.19.1), so perhaps whatever bug was fixed with refreshing the DataTable was part of the reason I was struggling to get this working.

[TomJGooding]

Thinking about it, this could probably use a helper widget. Some container with a loading boolean.

I really like this idea of a helper wrapper to easily implement the loading animation while necessary data is loaded. I had a wee go at implementing this myself, but think I need to leave this to the experts!

[vigne-Sh]

This works without any issues.

But i had a doubt, what if there are multiple DataTables to refresh
or
multiple tables which is rendered from rich Table after fetching the data through multiple api calls of various services

How do we configure the loading indicator then .?

[TomJGooding]

It would just be the same process of switching the visibility of the loading indicator/tables wouldn't it, unless I've not quite understood what you mean?

[vigne-Sh]

well I have a requirement to display 4 to 5 tables where all the tables are fetching data from various api calls

The above example is rendering a single DataTable

I initially developed with rich Table and now I'm rendering it in textual
its working as i expected but i want the LoadingIndicator to keep displaying until all the 5 tables are loaded completely.

[TomJGooding]

The advice above for switching the visibility of the loading indicator/tables still holds. Here's a quickly hacked together example, though depending on your app there might be a more efficient way.

import asyncio

from textual import work
from textual.app import App, ComposeResult
from textual.containers import Grid
from textual.reactive import var
from textual.widgets import DataTable, LoadingIndicator


class TableApp(App):
    CSS = """
    Grid {
        grid-size: 2;
    }

    DataTable {
        border: round $primary;
    }
    """

    load_count: var[int] = var(0)
    fully_loaded: var[bool] = var(False)

    def compose(self) -> ComposeResult:
        yield LoadingIndicator()
        with Grid():
            yield DataTable(id="table-one")
            yield DataTable(id="table-two")
            yield DataTable(id="table-three")
            yield DataTable(id="table-four")

    def on_mount(self) -> None:
        self.query_one(LoadingIndicator).display = True
        self.query_one(Grid).display = False

        self.load_table_one_data()
        self.load_table_two_data()
        self.load_table_three_data()
        self.load_table_four_data()

    def compute_fully_loaded(self) -> bool:
        return self.load_count == 4

    def watch_fully_loaded(self, fully_loaded: bool) -> None:
        if fully_loaded:
            self.query_one(LoadingIndicator).display = False
            self.query_one(Grid).display = True

    @work
    async def load_table_one_data(self) -> None:
        await asyncio.sleep(1)  # Simulate time to load the data
        data: list[tuple] = [
            ("TableOne C1", "TableOne C2"),
            ("TableOne R1 C1", "TableOne R1 C2"),
            ("TableOne R2 C1", "TableOne R2 C2"),
            ("TableOne R3 C1", "TableOne R3 C2"),
        ]
        table = self.query_one("#table-one", DataTable)
        table.border_title = "Table One"
        rows = iter(data)
        table.add_columns(*next(rows))
        table.add_rows(rows)

        self.load_count += 1

    @work
    async def load_table_two_data(self) -> None:
        await asyncio.sleep(2)  # Simulate time to load the data
        data: list[tuple] = [
            ("TableTwo C1", "TableTwo C2"),
            ("TableTwo R1 C1", "TableTwo R1 C2"),
            ("TableTwo R2 C1", "TableTwo R2 C2"),
            ("TableTwo R3 C1", "TableTwo R3 C2"),
        ]
        table = self.query_one("#table-two", DataTable)
        table.border_title = "Table Two"
        rows = iter(data)
        table.add_columns(*next(rows))
        table.add_rows(rows)

        self.load_count += 1

    @work
    async def load_table_three_data(self) -> None:
        await asyncio.sleep(3)  # Simulate time to load the data
        data: list[tuple] = [
            ("TableThree C1", "TableThree C2"),
            ("TableThree R1 C1", "TableThree R1 C2"),
            ("TableThree R2 C1", "TableThree R2 C2"),
            ("TableThree R3 C1", "TableThree R3 C2"),
        ]
        table = self.query_one("#table-three", DataTable)
        table.border_title = "Table Three"
        rows = iter(data)
        table.add_columns(*next(rows))
        table.add_rows(rows)

        self.load_count += 1

    @work
    async def load_table_four_data(self) -> None:
        await asyncio.sleep(4)  # Simulate time to load the data
        data: list[tuple] = [
            ("TableFour C1", "TableFour C2"),
            ("TableFour R1 C1", "TableFour R1 C2"),
            ("TableFour R2 C1", "TableFour R2 C2"),
            ("TableFour R3 C1", "TableFour R3 C2"),
        ]
        table = self.query_one("#table-four", DataTable)
        table.border_title = "Table Four"
        rows = iter(data)
        table.add_columns(*next(rows))
        table.add_rows(rows)

        self.load_count += 1


app = TableApp()
if __name__ == "__main__":
    app.run()

[vigne-Sh]

Thanks alot 💯 @TomJGooding for this example, this example 🥇 gave a clarity on what needs to be done during refresh.

[ptmcg]

This worked for me in logmerger, when reading from a really long log file. But I had to add this inside my "load next line" loop, to yield the event loop to the LoadingIndicator so that it could perform its animation:

        await asyncio.sleep(0)

[ptmcg]

Actually, once I added this, I didn't even need the LoadingIndicator any more, since the DataTable I was loading would display each new row as I added it.

I might look at how to do a small "all data loaded" message.

[ptmcg]

self.bell() and self.notify("Data loading complete") did the trick!