performance issue with svg icon in qt Buttons

[djobet]

Bug Description

I noticed my application was suddenly noticeably slower, so I bisected my repo.
This is the culprit :

david@grogu:~/dev/rust/pgn_viewer$ git show 36fe48c5690bbed9adf2f8c7efe795dc3628d5ee | cat
commit 36fe48c5690bbed9adf2f8c7efe795dc3628d5ee
Author: David Jobet <[email protected]>
Date:   Sat Feb 1 15:12:17 2025 +0000

    impl move with buttons

diff --git a/ui/move_tree.slint b/ui/move_tree.slint
index 0fb0ee1..0e1775d 100644
--- a/ui/move_tree.slint
+++ b/ui/move_tree.slint
@@ -38,6 +38,11 @@ export global MoveTreeModel {
 
     in property <image> load_image: @image-url("data/filesystem/folder-open.svg");
     in property <image> save_image: @image-url("data/filesystem/save.svg");
+    in property <image> prev_move: @image-url("data/move/chevron-back-outline.svg");
+    in property <image> next_move: @image-url("data/move/chevron-forward-outline.svg");
+    in property <image> prev_subline: @image-url("data/move/chevron-up.svg");
+    in property <image> next_subline: @image-url("data/move/chevron-down.svg");
+    in property <image> open_sublines: @image-url("data/move/caret-down-outline.svg");
 
     in property <[TreeChessMoves]> chess_moves: [];
     in property <TreePath> current_path : {path:[0], move_id: 1}; // TODO : should be init by rust
@@ -194,5 +197,37 @@ export component MoveTree inherits Rectangle {
                 }
             }
         }
+        HorizontalLayout {
+            Button {
+                icon: MoveTreeModel.prev_move;
+                clicked => {
+                    MoveTreeModel.keyboard_command(KeyboardCommand.Back);
+                }
+            }
+            Button {
+                icon: MoveTreeModel.next_move;
+                clicked => {
+                    MoveTreeModel.keyboard_command(KeyboardCommand.Next);
+                }
+            }
+            Button {
+                icon: MoveTreeModel.open_sublines;
+                clicked => {
+                    MoveTreeModel.keyboard_command(KeyboardCommand.OpenSublines);
+                }
+            }
+            Button {
+                icon: MoveTreeModel.prev_subline;
+                clicked => {
+                    MoveTreeModel.keyboard_command(KeyboardCommand.PrevSubline);
+                }
+            }
+            Button {
+                icon: MoveTreeModel.next_subline;
+                clicked => {
+                    MoveTreeModel.keyboard_command(KeyboardCommand.NextSubline);
+                }
+            }
+        }
     }
 }

With this commit reverted, everything is smooth again.
See attached videos
smooth one : (with revert) https://github.com/user-attachments/assets/68a52bb9-515c-40da-bdac-f055295e4d51
choppy one : https://github.com/user-attachments/assets/2431a602-2830-4a3f-a222-3ba36d700bf5

At that point, I'm not sure how I can make a minimal example, but I can give you the full code if you want.

Note : no regression with SLINT_BACKEND=winit
Note : for some reason I could not upload a tgz of my git repo

Reproducible Code (if applicable)

Environment Details

• Slint Version: 1.9.1
• Platform/OS: Linnux Fedora 41
• Programming Language: rust
• Backend/Renderer: qt

Product Impact

No real impact for me, but I thought you might be interested in tracking that regression.

[ogoffart]

Looks like a bug indeed.
It could be that this code triggers some bad condition in the backend.
Looking at the change, it is perhaps a SVG that is slow to decode, or trashes the cache or something.
We would need to run a profiler to figure out.
If you give us a link to the reprository so i can try it out, I could try to investigate.

[djobet]

Hello, I don't have a public repo (yet). I can send you a tgz of what I have (I tried to attach to the bug report but I guess the extension or the file size were not accepted). Where can I send it ? I did run a quick perf on it, and it did not show anything svg related that I can remember. Also I noticed in another window that putting an image after a listview seemed to trigger the same kind of slowdown. I'll try to work on a simpler example this evening if I find the time. Thanks for your help ! David Le lun. 3 févr. 2025, 08:28, Olivier Goffart ***@***.***> a écrit :

…

Looks like a bug indeed. It could be that this code triggers some bad condition in the backend. Looking at the change, it is perhaps a SVG that is slow to decode, or trashes the cache or something. We would need to run a profiler to figure out. If you give us a link to the reprository so i can try it out, I could try to investigate. — Reply to this email directly, view it on GitHub <#7511 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIATIUOKMH34VU6JGLBECHD2N4SB3AVCNFSM6AAAAABWJQ6L2WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMZQGI3TAMRQGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[djobet]

Here's a quick repro (don't know if it would impact my chess pieces moving), but it definitively impact another dialog

export struct GameHeader {
    name: string,
    value: string,
}

export component SlowDisplay inherits Window {
    in property <image> new_image: @image-url("data/add-outline.svg");
    in property <image> delete_image: @image-url("data/trash.svg");

    property <[GameHeader]> headers: [
        {name: "White", value: "toto"},
        {name: "Black", value: "titi"}
    ];

    VerticalBox {
        ListView {
            for header in headers : HorizontalLayout {
                width: 300px;
                spacing: 5px;
                // Button {
                //     icon: delete_image;
                // }
                LineEdit {
                    text: header.name;
                    width: 100px;
                    edited(t) => {
                        header.name = t
                    }
                }
                LineEdit {
                    text: header.value;
                    width: 100px;
                    edited(t) => {
                        header.value = t
                    }
                }
            }
        }
    }
}

try uncommenting the button which has the delete_image and see the difference.
trash.svg can be downloaded from https://iconduck.com/icons/58973/trash

[ogoffart]

I can reproduce the problem

[ogoffart]

I profiled in debug mode (because i could reproduce the problem better in debug)

Looks like we re-render the SVG on every paint.

When drawing a Image in QtItemRenderer::draw_image_impl the result of image_to_pixmap is cached. But this is not the case when drawing a Button.