Optimizing Sidebar Expand/Collapse Performance with Multiple Widgets

[EduardoWS]

Hello everyone!

I'm developing a software application that includes a sidebar that expands and collapses when a button is clicked. The functionality works perfectly when there aren't many widgets on the screen. However, when the screen is filled with widgets, there's noticeable lag during the expand/collapse action.

Does anyone know if it's possible to optimize this process to eliminate the lag? Any advice would be greatly appreciated!

Thank you!

[dipeshSam]

Could you please demonstrate it graphically how your application is lagging? Any image or video might be helpful in mitigating the problem you are facing. Also, a Sample Reproducible Code will be helpful.

Regards.

[EduardoWS]

Sure, I'll share a video here demonstrating the performance of my software.

At the beginning, I'm collapsing and expanding the sidebar with all the widgets added to the window. You'll notice that there's a slight delay and some flickering in the widgets.

Next, I disable these widgets on the screen and repeat the action of collapsing and expanding the sidebar. You'll see how much smoother it becomes. I would like it to be as fast as this, without any stuttering, even with the widgets enabled.

2024-09-03.18-50-36.mp4

I'll send the method I used to collapse and expand the sidebar. Basically, the window has a main_frame that is divided into two parts using a grid (left and right). The sidebar is on the left side, and the rest is on the right. The right side initially has a size of 64 (with the sidebar expanded). When collapsing the sidebar, I use grid_columnconfigure to increase the size of the right side, causing the sidebar to shrink.

[dipeshSam]

It is a CustomTkinter implementation lack where it updates its background drawing every time a widget is resized. Consequently, this behavior introduces additional overhead and places an undue burden on the widgets. The flickering you’re experiencing likely stems from the frequent updates of the mega widgets within a single window thread, along with their associated drawings.

Here’s a solution to mitigate this scenario. You can create toggle-able widgets that are positioned over the window but don’t trigger resizing of their parent or child widgets. By carefully managing these toggle widgets, you can reduce the unnecessary redraws and improve the overall performance of the drawn widget bundles.

Here is code for a Sidebar class:

from customtkinter import CTkFrame


class Sidebar(CTkFrame):
    """
    An overlay type sidebar for CustomTkinter

    Specific params:
    - `sidebar_transition_delay`: An integer value in milliseconds
    - `sidebar_padding`: An integer value for side spacing to the sidebar. 
    
    """
    
    def __init__(self, 
        master: any, 
        width: int = 200,
        sidebar_padding: int = 0,
        sidebar_transition_delay: int = 1,
        border_width: int | str | None = None, 
        corner_radius: int | str | None = None, 
        bg_color: str | tuple[str, str] = "transparent", 
        fg_color: str | tuple[str, str] | None = None, 
        border_color: str | tuple[str, str] | None = None,        
        background_corner_colors: tuple[str | tuple[str, str]] | None = None,
        ):
                 
        super().__init__(master, width, 10, corner_radius, border_width, bg_color, fg_color, border_color, background_corner_colors, None)

        # Saving variables        
        self._is_open: bool = False
        self._sidebar_padding = sidebar_padding
        self._sidebar_transition_delay = sidebar_transition_delay
        self._sidebar_final_width = width * self._get_widget_scaling()
        
        # Prohibit widget extend
        self.grid_propagate(False)
        self.pack_propagate(False)
        
        # Place frame at desired location
        super().place(x=-self._sidebar_final_width, y=0, relheight=1, anchor="nw")
        
                
  
    def toggle(self):
        """Toggles between sidebar open or close"""
        if not self._is_open:
            self.open_sidebar()    
            self._is_open = True
            
        else:
            self.close_sidebar()    
            self._is_open = False
            
    
    def open_sidebar(self):
        """Opens sidebar in given side direction."""             
        x = int(super().place_info()["x"])    
        super().place_configure(x = x + 1)
                
        if x < self._sidebar_padding:
            self.after(self._sidebar_transition_delay, self.open_sidebar)
        
        
        
    def close_sidebar(self):
        """Closes sidebar in given side direction."""    
        x = int(super().place_info()["x"])    
        super().place_configure(x = x - 1)             
       
        if x >= -self._sidebar_final_width:
            self.after(self._sidebar_transition_delay, self.close_sidebar)
        
        
    
    def place(self, **kwargs):
        raise AttributeError(
            "This method is not allowed in sidebar, use `toggle()` instead.")      

    def grid(self, **kwargs):
        self.place()      
            
    def pack(self, **kwargs):
        self.place()      
                             
           
           
        

        
if __name__ == "__main__":
    from customtkinter import (
        CTk, 
        CTkButton,
        CTkLabel
    )    
    
    app = CTk()    
    app.geometry("900x600")

    sidebar = Sidebar(app)     
    
    
    btn = CTkButton(app, text="Toggle Sidebar", command=sidebar.toggle)
    btn.place(relx=0.5, anchor="center", rely=0.5)
    
    
    title_heading = CTkLabel(sidebar, text="My App", font=("Arial", 20, "bold"))
    title_heading.pack(side="top", anchor="w", padx=20, pady=20)

       

    app.mainloop()

Output:

Hope, the above explanation may helpful to you. What do you expect more from the above description, please mention here.
Regards.