StandardTableView causes the CPU to occupy 100%, and then the UI freezes

[Vjze]

I tested two demos, one uses struct to customize the display information, and the other uses StandardTableView to display the information. StandardTableView will freeze after a few clicks to query, but the customized display will not freeze no matter how many times it is clicked. What is the reason? My English is not good, please forgive me.

[Vjze]

https://github.com/Vjze/Rust_demo;
https://github.com/Vjze/slint_test_rust;

This is the code address, maybe someone can tell me why.

[bjorn]

Just to make sure, are you using Slint 1.2.1 or later or still on 1.2.0? Slint 1.2.1 includes a significant optimization for the StandardTableView in case of models with many rows. Up to 1.2.0, it would instantiate items for all rows, which could cause (temporary) freezing for large models.

[vonnieda]

Edit: Retracting this for now. I rewrote my test code to just create 10k rows without any of my database stuff and it works fine, so I think something else is happening. I'll update this when I am sure.

I am seeing this same problem on Slint 1.3.0 on macOS as well. I'm loading about 900 rows into a StandardTableView and the second time I set the model (not the first) it goes to 100% CPU and locks the UI.

Here is the code that sets the model:

    fn home(librarian: LibrarianHandle, ui: slint::Weak<AppWindow>) {
        std::thread::spawn(move || {
            let i = Instant::now();
            let mut tracks: Vec<(Artist, Release, Recording)> = Vec::new();
            for artist in Artist::list(librarian.as_ref()) {
                for release in artist.releases(librarian.as_ref()) {
                    for recording in release.recordings(librarian.as_ref()) {
                        // for source in recording.sources(librarian.as_ref()) {
                            tracks.push((artist.clone(), release.clone(), recording.clone()));
                        // }
                    }
                }
            }
            log::info!("{}ms for {} rows", i.elapsed().as_millis(), tracks.len());

            // Calling it here. On first load everything is fine, but on second
            // load the UI locks up. Debugging seems to indicate maybe it's trying
            // to deregister a bunch of bindings or something in Slint?
            ui.upgrade_in_event_loop(move |ui| {
                let rows: VecModel<ModelRc<StandardListViewItem>> = VecModel::default();
                for (artist, release, recording) in tracks {
                    let row = Rc::new(VecModel::default());
                    row.push(recording.title.listview_item());
                    row.push(release.title.listview_item());
                    row.push(artist.name.listview_item());
                    row.push("".listview_item());
                    row.push("".listview_item());
                    row.push("".listview_item());
                    rows.push(row.into());
                }
                let adapter = HomeAdapter {
                    rows: ModelRc::new(rows),
                };
                log::info!("adapter ready");
                ui.set_home_adapter(adapter);
                log::info!("set adapter");
                ui.set_page(5);
                log::info!("set page");
            }).unwrap();
        });
    }

And here is the Slint code:

import { HorizontalBox , VerticalBox} from "std-widgets.slint";
import { Palette, LinkAdapter, Navigator, Links, Link, TrackAdapter} from "common.slint";
import { CardAdapter } from "card.slint";
import { StyleMetrics , ScrollView, ListView, StandardTableView} from "std-widgets.slint";
import { CardGrid } from "card_grid.slint";

export struct HomeAdapter {
    rows: [[StandardListViewItem]],
}

export component Home inherits VerticalLayout {
    StandardTableView {
        height: 100%;
        width: 100%;
        columns: [
            { title: "Title" },
            { title: "Album" },
            { title: "Artist" },
            { title: "Track #" },
            { title: "Plays" },
            { title: "Length" },
        ];
        rows: adapter.rows;
    }

    in-out property <HomeAdapter> adapter: {
        rows: [
            [
                { text: "!!!!!!!" }, { text: "Phrenology" }, { text: "The Roots" },  { text: "3" },  { text: "127" }, { text: "00:25" }, 
            ],
            [
                { text: "!!!!!!!" }, { text: "Phrenology" }, { text: "The Roots" },  { text: "3" },  { text: "127" }, { text: "00:25" }, 
            ],
            [
                { text: "!!!!!!!" }, { text: "Phrenology" }, { text: "The Roots" },  { text: "3" },  { text: "127" }, { text: "00:25" }, 
            ]
        ],
    };
}

And terminal output:

     Running `/Users/jason/Projects/Dimple/target/debug/dimple_ui_slint`
[2024-02-20T00:37:57.570Z INFO  dimple_ui_slint::app_window_controller] dimple://home
[2024-02-20T00:37:57.571Z INFO  dimple_ui_slint::app_window_controller] 0ms for 0 rows
[2024-02-20T00:37:57.704Z INFO  dimple_ui_slint::app_window_controller] adapter ready
[2024-02-20T00:37:57.704Z INFO  dimple_ui_slint::app_window_controller] set adapter
[2024-02-20T00:37:57.704Z INFO  dimple_ui_slint::app_window_controller] set page
[2024-02-20T00:37:57.888Z INFO  dimple_file_library::dimple_file_library] Scanned 849 files in 318ms
[2024-02-20T00:38:05.686Z INFO  dimple_ui_slint::app_window_controller] dimple://artists
[2024-02-20T00:38:09.041Z INFO  dimple_ui_slint::app_window_controller] dimple://home
[2024-02-20T00:38:15.951Z INFO  dimple_ui_slint::app_window_controller] 6909ms for 886 rows
[2024-02-20T00:38:15.965Z INFO  dimple_ui_slint::app_window_controller] adapter ready
[2024-02-20T00:38:15.965Z INFO  dimple_ui_slint::app_window_controller] set adapter
[2024-02-20T00:38:15.965Z INFO  dimple_ui_slint::app_window_controller] set page

After the second "set page" the UI locks up with spinning beach ball. I peeked around in the debugger a bit and got a "feeling" that it had something to do with unregistering event handlers or bindings or something like that, deep in the Slint code.

I'd appreciate any thoughts or ideas anyone has. This is a show stopper for me.

Thanks,
Jason

[vonnieda]

Hi, I'd like to revisit this. I'm still experiencing the issue, and I've narrowed it down and have produced a stand alone test case, which is attached.

In short, when scrolling the StandardTableView quickly, there are huge spikes in CPU and the frame rate drops to 0. This is happening even in a simple table with 100 rows of 6 text columns, which is demonstrated in the attached app. If you bump it up to 1000 rows you start getting complete UI lockups with Mac beach balls, and 10k rows is unusable.

I'm on an M1 Mac with 16 GB of RAM.

The attached sample project is a clone of https://github.com/slint-ui/slint-rust-template with the following slint and Rust code:

use std::rc::Rc;

use slint::{ModelRc, StandardListViewItem, VecModel};

slint::include_modules!();

fn main() -> Result<(), slint::PlatformError> {
    let ui = AppWindow::new()?;

    let rows: VecModel<ModelRc<StandardListViewItem>> = VecModel::default();
    for i in 0..100 {
        let row = Rc::new(VecModel::default());
        row.push(StandardListViewItem::from(format!("{}", i).as_str()));
        row.push(StandardListViewItem::from(format!("{}", i).as_str()));
        row.push(StandardListViewItem::from(format!("{}", i).as_str()));
        row.push(StandardListViewItem::from(format!("{}", i).as_str()));
        row.push(StandardListViewItem::from(format!("{}", i).as_str()));
        row.push(StandardListViewItem::from(format!("{}", i).as_str()));
        rows.push(row.into());
    }
    ui.set_rows(ModelRc::new(rows));

    ui.run()
}

import { Button, VerticalBox, StandardTableView } from "std-widgets.slint";


export component AppWindow inherits Window {
    in-out property <[[StandardListViewItem]]> rows;

    VerticalBox {
        StandardTableView {
            height: 100%;
            width: 100%;
            columns: [
                { title: "Title" },
                { title: "Album" },
                { title: "Artist" },
                { title: "Track #" },
                { title: "Plays" },
                { title: "Length" },
            ];
            rows: rows;
        }
        Text {
            horizontal-alignment: right;
            text: rows.length + " items";
        }
    }
}

my-project.zip