Nicegui watchdog breaks pylance and performance drops in vscode

[phifuh]

First Check

• I added a very descriptive title here.
• This is not a Q&A. I am sure something is wrong with NiceGUI or its documentation.
• I used the GitHub search to find a similar issue and came up empty.

Example Code

.run(reload=False, title="Report builder", port=8080)

Description

In the past two weeks, I noticed that Pylance was crashing very frequently in VsCode, and the crashes started happening at shorter and shorter intervals. It eventually got to the point where I couldn’t bear it anymore, so I started digging into what was causing the issue.

Naturally, I first looked at my VS Code extensions and disabled most of them, but that had no effect. Then I noticed that my NiceGUI application had also become “laggy,” which often forced me to reset it manually. After some testing, I disabled the reload function — and boom, no more problems:

ui.run(reload=False, title="Report builder", port=8080)

I confirmed this with a colleague who had the same issue. I also tested it on three different PCs, and it seems that the reload function is what’s causing the problem.

I’m not sure how to dig deeper into this, but I thought it would be helpful to at least create an issue for it.

NiceGUI Version

sortable branch

Python Version

3.13

Browser

Chrome

Operating System

Windows

Additional Context

No response

[evnchn]

Hello @phifuh thanks for the report.

First off I agree that hot reload is kinda slow at times, but I just assumed it's the issue of my slow windows laptop. Now that I switched to a MacBook maybe I can give it another shot.

For the reload, it is based on uvicorn and that is based on watchfiles.

Check https://github.com/zauberzeug/nicegui/blob/main/pyproject.toml#L38

It may helpful if we do a plain uvicorn ASGI application to see what's going on.

[phifuh]

Hello @phifuh thanks for the report.

First off I agree that hot reload is kinda slow at times, but I just assumed it's the issue of my slow windows laptop. Now that I switched to a MacBook maybe I can give it another shot.

For the reload, it is based on uvicorn and that is based on watchfiles.

Check https://github.com/zauberzeug/nicegui/blob/main/pyproject.toml#L38

It may helpful if we do a plain uvicorn ASGI application to see what's going on.

Last time I used fastapi with reload I didnt have this issue so I am not sure if NiceGUI is injecting something inbetween?

[evnchn]

Hey @phifuh I had an idea. Can you check if the 3.0 branch is better? According to my instinct, I feel like getting rid of the auto-index client made NiceGUI much better to "deal with" in general. I have seen less pytest warnings while working on #5153 targeting 3.0 compared to what was in #5145 targeting 2.x

Maybe the watchdog is waiting for the auto-index client to suspend, which it never will?

[phifuh]

Today I restarted the app many times (30–40). Even though I don’t have reload=True, after 20–30 retries Pylance broke again. It seems to work for a longer period of time now, but eventually it still crashes. Could it be that NiceGUI isn’t freeing some memory, or maybe running some conflicting background tasks?

I hope others experience something similar so we can narrow down the cause of this issue, because right now it just feels spooky.

[falkoschindler]

Hi @phifuh,

Can you reproduce the laggy behavior with a very simple NiceGUI app, or does it only occur with a large project?
In comparison it would be interesting to see if a plain FastAPI behaves similarly:

#!/usr/bin/env python3
import uvicorn
from fastapi import FastAPI
from fastapi.responses import PlainTextResponse

app = FastAPI()

@app.get("/", response_class=PlainTextResponse)
def index():
    return "Hello, World!"

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8080)

Without interactive UI elements it might be hard to see any lag though, unless we find a different metric like increased CPU or memory usage.

[phifuh]

I tried with a very minimalistic single file setup and couldnt reproduce it.
I might try it on a weaker pc just in case but it might be on larger projects. I will let you know if I can further nail it down

[phifuh]

Good? news 🗡️

I was working on my other project and I noticed the lag behaviour. So I switch my main file with this "tracking" main file and there is actually a difference!

"""
Single file to time NiceGUI bootup performance.
Run this file directly: python nicegui_timer.py
"""

import time
import psutil
import os
from datetime import datetime

class NiceGUITimer:
    """Simple timer for NiceGUI bootup performance."""
    
    def __init__(self):
        self.start_time = time.perf_counter()
        self.process = psutil.Process()
        self.initial_memory = self.process.memory_info().rss / 1024 / 1024  # MB
        
    def mark(self, event_name):
        """Mark a timing event."""
        elapsed = time.perf_counter() - self.start_time
        print(f"[{elapsed:.4f}s] {event_name}")
        return elapsed
        
    def get_memory_usage(self):
        """Get current memory usage."""
        current = self.process.memory_info().rss / 1024 / 1024
        return current, current - self.initial_memory

def main():
    """Time NiceGUI bootup process."""
    print("🚀 Starting NiceGUI bootup timing...")
    print(f"Started at: {datetime.now().strftime('%H:%M:%S.%f')[:-3]}")
    print("-" * 50)
    
    timer = NiceGUITimer()
    
    # Time import
    timer.mark("Starting import")
    from nicegui import ui, app
    timer.mark("NiceGUI imported")
    
    # Time page setup
    timer.mark("Setting up pages")
    
    @ui.page('/')
    def index():
        ui.html('<h1>🎯 NiceGUI Performance Test</h1>')
        ui.label(f'Server started at: {datetime.now().strftime("%H:%M:%S")}')
        
        with ui.expansion('Performance Info', value=True):
            ui.label('This page was created to test NiceGUI bootup time.')
            
            # Add some components to test rendering
            with ui.row():
                ui.button('Test Button 1', on_click=lambda: ui.notify('Button 1'))
                ui.button('Test Button 2', on_click=lambda: ui.notify('Button 2'))
            
            # Simple chart
            ui.plotly({
                'data': [{'x': [1, 2, 3, 4], 'y': [10, 11, 12, 13], 'type': 'scatter'}],
                'layout': {'title': 'Test Chart', 'height': 300}
            })
    
    timer.mark("Pages configured")
    
    # Server event handlers
    @app.on_startup
    async def startup():
        setup_time = timer.mark("Server startup completed")
        memory, delta = timer.get_memory_usage()
        
        print("-" * 50)
        print("✅ BOOTUP COMPLETE!")
        print(f"📊 Total bootup time: {setup_time:.4f} seconds")
        print(f"💾 Memory usage: {memory:.1f}MB (+{delta:.1f}MB)")
        print(f"🧵 Threads: {timer.process.num_threads()}")
        print("-" * 50)
        print("🌐 Open browser to: http://localhost:8080")
        print("⏹️  Press Ctrl+C to stop")
    
    timer.mark("Event handlers configured")
    
    # Start server
    timer.mark("Starting server")
    ui.run(
        title="NiceGUI Performance Test",
        port=8080,
        reload=False,  # Disable reload for accurate timing
        show=False,    # Don't auto-open browser
    )

if __name__ == "__main__":
    main()

[0.0001s] Starting import
[1.5367s] NiceGUI imported
[1.5369s] Setting up pages
[1.5373s] Pages configured
[1.5374s] Event handlers configured
[1.5375s] Starting server
NiceGUI ready to go on http://localhost:8080, http://169.254.127.182:8080, http://192.168.1.70:8080, and http://192.168.56.1:8080
[1.6139s] Server startup completed

✅ BOOTUP COMPLETE!
📊 Total bootup time: 1.6139 seconds
💾 Memory usage: 69.7MB (+54.7MB)
🧵 Threads: 10

When I was running the tests earlier I had on average:
0.500seconds total bootup
memory usage of 60(+1MB) ish
always 11 threads.

To sumarize, at least a second slower on this tiny script, alawys + 60mb and 1 less thread. I am hope that this might be usefull for someone, pointing in some direction on what might be going on.

The worst part about this is, even a restart didnt bring it back down, so is there maybe some chaching going on?

[phifuh]

And bad news: Tested this today on a slower machine when I noticed the lagging behaviour.
Memory usage was the same on laggy / not laggy,
Counts of threads the same, the only difference was in the boot_up time which got worse from ~1.5s to ~2.0 seconds

[phifuh]

I have very interesting news.

During the last 3–4 weeks I’ve been working on other parts of our project, and I didn’t notice any performance issues. That made me think the slowdown was fixed by either using a newer NiceGUI 3.x or some VS Code extension updates.

But now I’m honestly suspecting #4656 as the real issue.

When I originally had the bad performance, my main work was on the nested sortable codebase (we have implemented a nested sortable tree navigation). Today I wanted to implement a flat sortable media panel, and after only 5–10 minutes playing with the example code and building a new layout I noticed the same performance degradation again.

So: I think the performance drop correlates with actively working in nested / Sortable-heavy code, not the rest of the app.

@falkoschindler or @evnchn could you maybe try to reproduce this?

I know this is a strange thing to “test” because it is based on observation / user-perception, but I’m quite confident it might be related to ui.sortable and some kind of memory leak.

My suggested repro steps:

0. use a weaker PC / laptop to notice the slowdown faster
1. Work with the example code — do multiple smaller edits so the auto “watchfile refresh” is triggered many times within ~10 minutes
2. Switch to a new file and create a very minimal sortable (I attached another example below if you don’t want to write it yourself)
3. Observe / compare performance at that point

from nicegui import ui
from nicegui.events import GenericEventArguments

from random import randint


# Event handlers
def on_end(e: GenericEventArguments):
    ui.notify(f'Item moved from {e.args["oldIndex"]} to {e.args["newIndex"]}')


def on_add():
    ui.notify('Item added from another list')


def on_change():
    ui.notify('List order changed')


def on_move():
    ui.notify('Item being moved')


def on_clone_add(e: GenericEventArguments):
    ui.notify(f'Cloned item added to the target list at index {e.args["newIndex"]}')


def on_filter(e: GenericEventArguments):
    ui.notify(f'Filtered item was clicked: {e.args["item"]}')


def on_select(e: GenericEventArguments):
    ui.notify(f'Item selected: {e.args["item"]}')


def on_deselect(e: GenericEventArguments):
    ui.notify(f'Item deselected: {e.args["item"]}')


def on_spill(e: GenericEventArguments):
    ui.notify(f'Item spilled: {e.args["item"]}')


def main_demo() -> None:
    with ui.sortable(on_end=on_end):
        for i in range(1, 7):
            with ui.card():
                ui.label(f'Item {i}')


def shared_lists() -> None:
    with ui.row():
        with ui.card():
            ui.label('List 1').classes('text-h6')
            with ui.sortable({'group': 'shared'}, on_add=on_add, on_change=on_change):
                for i in range(1, 7):
                    with ui.card():
                        ui.label(f'Item {i}')

        with ui.card():
            ui.label('List 2').classes('text-h6')
            with ui.sortable({'group': 'shared'}, on_add=on_add, on_change=on_change):
                for i in range(1, 7):
                    with ui.card().classes('bg-amber-500'):
                        ui.label(f'Item {i}')



def true_cloning() -> None:
    class ClonableCard(ui.card):
        def __init__(
            self,
            label='Slider',
            bg='',
        ):
            super().__init__()
            self.label = label
            self.bg = bg

            # Create a new card with the same content but possibly different styling
            with self.classes(f'{self.bg}'):
                ui.label(self.label)

        def clone(self):
            return ClonableCard(
                label=f'Clone of {self.label}',
                bg=self.bg,
            )

    def handle_true_clone(e):
        # Get info about the added item
        html_id = e.args.get('sourceItem')
        target_index = e.args.get('newIndex')

        # Find the original item in the source list
        # This is where we need to know which list the item came from
        if e.sender.id == true_clone_list1.id:
            source_list = true_clone_list1
            dest_list = true_clone_list2
        else:
            source_list = true_clone_list2
            dest_list = true_clone_list1

        # Find the source element by its ID
        source_element = source_list.get_child_by_id(html_id)

        if source_element:
            with dest_list:
                # Create a clone
                clone = source_element.clone()
                clone.move(dest_list, target_index=target_index)
                # Notify user
                ui.notify(f'Cloned {source_element.label} to position {target_index}')

    with ui.row():
        with ui.card():
            ui.label('List 1').classes('text-h6')
            with ui.sortable({
                'group': {'name': 'true-clone-example', 'pull': 'clone'},
                'cancelClone': True
            }, on_cancel_clone=handle_true_clone) as true_clone_list1:
                for i in range(1, 7):
                    ClonableCard(f'List1 {i}')

        with ui.card():
            ui.label('List 2').classes('text-h6')
            with ui.sortable({
                'group': {'name': 'true-clone-example', 'pull': 'clone'},
                'cancelClone': True
            }, on_cancel_clone=handle_true_clone) as true_clone_list2:
                for i in range(1, 7):
                    ClonableCard(f'List2 {i}', 'bg-amber-500')

        async def show_current_order1():
            items_text = [item.id
                          for item in true_clone_list1.default_slot.children]
            ui.notify(f'Current order: {items_text}')
            dom_order = await true_clone_list1.run_method('getChildrenOrder')
            ui.notify(f'Current DOM order: {dom_order}')

        async def show_current_order2():
            items_text = [item.id
                          for item in true_clone_list2.default_slot.children]
            ui.notify(f'Current order: {items_text}')
            dom_order = await true_clone_list2.run_method('getChildrenOrder')
            ui.notify(f'Current DOM order: {dom_order}')

        ui.button('Show Current Order 1', on_click=show_current_order1)
        ui.button('Show Current Order 2', on_click=show_current_order2)


def disable_sorting() -> None:
    with ui.row():
        with ui.card():
            ui.label('Non-Sortable List (Pull Only)').classes('text-h6')
            with ui.sortable({
                'group': {'name': 'shared-disabled', 'pull': 'clone', 'put': False},
                'sort': False
            }):
                for i in range(1, 7):
                    with ui.card():
                        ui.label(f'Item {i}')

        with ui.card():
            ui.label('Sortable List').classes('text-h6')
            with ui.sortable({'group': 'shared-disabled'}):
                for i in range(1, 7):
                    with ui.card().classes('bg-amber-500'):
                        ui.label(f'Item {i}')


def nested_sortables() -> None:
    # Create a helper function to recursively initialize nested sortables
    def create_nested_list(items, level=1):
        with ui.sortable({
            'group': 'nested',
            'fallbackOnBody': True,
            'swapThreshold': 0.4,
            'invertSwap': True,
            'emptyInsertThreshold': 10,
        }).classes(f'nicegui-sortable-nested'):
            for item in items:
                with ui.card().classes(f'p-3 mb-2 nested-item'):
                    ui.label(item['text']).classes('font-bold')
                    # Create a container for children regardless of whether they exist
                    with ui.element('div').classes('pl-4 border-l-2 border-gray-300 nested-children'):
                        children = item.get('children', [])
                        create_nested_list(children, level + 1)

    # Define the nested structure
    nested_data = [
        {
            'text': 'Item 1.1',
            'children': [
                {'text': 'Item 2.1'},
                {
                    'text': 'Item 2.2',
                    'children': [
                        {'text': 'Item 3.1'},
                        {'text': 'Item 3.2'},
                    ]
                },
                {'text': 'Item 2.3'},
            ]
        },
        {'text': 'Item 1.2'},
        {
            'text': 'Item 1.3',
            'children': [
                {'text': 'Item 2.4'},
                {'text': 'Item 2.5'},
            ]
        }
    ]

    with ui.element('div').classes('nested-container'):
        create_nested_list(nested_data)

    # Add improved supporting styles for the nested sortables
    ui.add_css('''
    .nested-item {
        background-color: rgba(59, 130, 246, 0.1);
        transition: background-color 0.2s;
    }
    .nested-item:hover {
        background-color: rgba(59, 130, 246, 0.2);
    }
    .nicegui-sortable-nested:empty {
        background-color: rgba(59, 130, 246, 0.1);
    }
    .nested-children:hover .nicegui-sortable-nested:empty {
        background-color: rgba(59, 130, 246, 0.2);
        border-color: #4b5563;
    }
    ''')


def dynamic_list_management() -> None:
    def add_deletable_object(label: str, sortable_object: ui.sortable):
        with ui.card() as card:
            with ui.row().classes('items-center w-full'):
                ui.label(label).classes('flex-grow')
                ui.button(icon='delete', color='red', on_click=lambda e: sortable_object.remove_item(card)).classes('min-w-0 w-8 h-8')

    def add_new_item(string: str, sortable_object: ui.sortable):
        with sortable_object:
            add_deletable_object(string, sortable_object)
        ui.notify('Item added to the list')

    with ui.sortable({'fallbackOnBody': True}, on_end=on_end) as dynamic_sortable:
        for i in range(1, 5):
            add_deletable_object(f'Sortable Item {i} - Drag to reorder', dynamic_sortable)

    # Form for adding new items
    with ui.row().classes('w-full items-center mb-4'):
        new_item_input = ui.input('Enter new item text').classes('flex-grow mr-2')
        ui.button('Add Item',on_click=lambda: [add_new_item(new_item_input.value, dynamic_sortable), new_item_input.set_value('')]).classes('bg-green-500')

    # Action buttons
    with ui.row().classes('mt-4'):
        ui.button('Delete All', color='red', on_click=dynamic_sortable.clear).classes('mr-2')
        ui.button('Add 3 Random Items', color='green', on_click=lambda: [
            add_new_item(f'Random Item {randint(1, 100)}', dynamic_sortable) for _ in range(3)]).classes('mr-2')

        async def show_current_order():
            items_text = [item.default_slot.children[0].default_slot.children[0].text
                          for item in dynamic_sortable.default_slot.children]
            ui.notify(f'Current order: {items_text}')

        ui.button('Show Current Order', on_click=show_current_order)


def event_debugging() -> None:
    ui.markdown("""
        This demo shows all available sortable events. Try:
        - Use the handle to move items in List 2
        - Dragging items between lists
        - Clicking the filtered (red) item
        - Holding Ctrl/Cmd and clicking multiple items
        - Rearranging items within a list
    """).classes('mt-4 text-sm')

    # Create a log panel to display event information
    log_panel = ui.log().classes('w-full h-64 overflow-auto')

    def log_event(name: str, e: GenericEventArguments):
        '''Log an event to the panel with its name and arguments'''
        log_panel.push(f'{name}: {e.args}')

    # Create handlers for all events
    def on_choose(e: GenericEventArguments): log_event('choose', e)
    def on_unchoose(e: GenericEventArguments): log_event('unchoose', e)
    def on_start(e: GenericEventArguments): log_event('start', e)
    def on_end(e: GenericEventArguments): log_event('end', e)
    def on_add(e: GenericEventArguments): log_event('add', e)
    def on_update(e: GenericEventArguments): log_event('update', e)
    def on_remove(e: GenericEventArguments): log_event('remove', e)
    def on_move(e: GenericEventArguments): log_event('move', e)
    def on_clone(e: GenericEventArguments): log_event('clone', e)
    def on_change(e: GenericEventArguments): log_event('change', e)
    def on_filter(e: GenericEventArguments): log_event('filter', e)
    def on_spill(e: GenericEventArguments): log_event('spill', e)
    def on_select(e: GenericEventArguments): log_event('select', e)
    def on_deselect(e: GenericEventArguments): log_event('deselect', e)

    # Clear the log
    ui.button('Clear Log', on_click=lambda: log_panel.clear()).classes('mb-4')

    def add_remove_handle(e: GenericEventArguments):
        # If moved within its own list, ignore
        if e.args['from'] == e.args['to']:
            return

        if e.args['to'] == sortable2.html_id:  # Add handle
            element = sortable2.get_child_by_id(e.args['item'])
            if element is None:
                assert 'Element should not be None'
                return

            with element.default_slot.children[0].default_slot:
                ui.icon('drag_handle').classes('nicegui-sortable-handle')
            # Reverse to have the handle first
            element.default_slot.children[0].default_slot.children.reverse()
        else:  # Remove handle
            element = sortable1.get_child_by_id(e.args['item'])
            if element is None:
                assert 'Element should not be None'
                return

            element.default_slot.children[0].remove(element.default_slot.children[0].default_slot.children[0])

    with ui.row():
        with ui.card():
            ui.label('List 1').classes('text-h6')
            with ui.sortable({
                'group': {'name': 'event-debugging'},
                'filter': '.nicegui-sortable-filtered',  # Items with this class won't be draggable
                'multiDrag': True,  # Enable multiple selection with Ctrl/Cmd
                'multiDragKey': 'ctrl',
            },
                    on_end=on_end,
                    on_add=on_add,
                    on_change=on_change,
                    on_select=on_select,
                    on_deselect=on_deselect) as sortable1:
                for i in range(1, 6):
                    # Make one item non-draggable to test filtering
                    if i == 3:
                        with ui.card().classes('nicegui-sortable-filtered'):
                            ui.label(f'Filtered Item {i} (non-draggable)')
                    else:
                        with ui.card():
                            with ui.row().classes('flex flex-row flex-nowrap items-center'):
                                ui.label(f'Item {i} (hold Ctrl/Cmd to select multiple)')
            sortable1.on('sort_end', add_remove_handle)
            sortable1.on('sort_choose', on_choose)
            sortable1.on('sort_unchoose', on_unchoose)
            sortable1.on('sort_filter', on_filter)
            sortable1.on('sort_spill', on_spill)
            sortable1.on('sort_start', on_start)
            sortable1.on('sort_update', on_update)
            sortable1.on('sort_remove', on_remove)
            sortable1.on('sort_move', on_move)
            sortable1.on('sort_clone', on_clone)
            sortable1.on('sort_change', on_change)

        with ui.card():
            ui.label('List 2').classes('text-h6')
            with ui.sortable({
                'handle': '.nicegui-sortable-handle',
                'group': {'name': 'event-debugging'},
            },
                    on_end=on_end,
                    on_add=on_add,
                    on_change=on_change,
                    on_select=on_select,
                    on_deselect=on_deselect) as sortable2:
                for i in range(1, 4):
                    with ui.card():
                        with ui.row().classes('flex flex-row flex-nowrap items-center'):
                            ui.icon('drag_handle').classes('nicegui-sortable-handle')
                            ui.label(f'Item {i}')
            sortable2.on('sort_end', add_remove_handle)
            sortable2.on('sort_choose', on_choose)
            sortable2.on('sort_unchoose', on_unchoose)
            sortable2.on('sort_filter', on_filter)
            sortable2.on('sort_spill', on_spill)
            sortable2.on('sort_start', on_start)
            sortable2.on('sort_update', on_update)
            sortable2.on('sort_remove', on_remove)
            sortable2.on('sort_move', on_move)
            sortable2.on('sort_clone', on_clone)
            sortable2.on('sort_change', on_change)

def event_debugging2() -> None:
    ui.markdown('''
        This demo shows all available sortable events. Try:
        - Use the handle to move items in List 2
        - Dragging items between lists
        - Clicking the filtered (red) item
        - Holding Ctrl/Cmd and clicking multiple items
        - Rearranging items within a list
    ''').classes('mt-4 text-sm')

    # Create a log panel to display event information
    log_panel = ui.log().classes('w-full h-64 overflow-auto')

    def log_event(name: str, e: GenericEventArguments):
        '''Log an event to the panel with its name and arguments'''
        log_panel.push(f'{name}: {e.args}')

    # Create handlers for all events
    def on_choose(e: GenericEventArguments): log_event('choose', e)
    def on_unchoose(e: GenericEventArguments): log_event('unchoose', e)
    def on_start(e: GenericEventArguments): log_event('start', e)
    def on_end(e: GenericEventArguments): log_event('end', e)
    def on_add(e: GenericEventArguments): log_event('add', e)
    def on_update(e: GenericEventArguments): log_event('update', e)
    def on_remove(e: GenericEventArguments): log_event('remove', e)
    def on_move(e: GenericEventArguments): 
        log_event('move', e)
        return False
    def on_clone(e: GenericEventArguments): log_event('clone', e)
    def on_change(e: GenericEventArguments): log_event('change', e)
    def on_filter(e: GenericEventArguments): log_event('filter', e)
    def on_spill(e: GenericEventArguments): log_event('spill', e)
    def on_select(e: GenericEventArguments): log_event('select', e)
    def on_deselect(e: GenericEventArguments): log_event('deselect', e)

    # Clear the log
    ui.button('Clear Log', on_click=lambda: log_panel.clear()).classes('mb-4')

    def add_remove_handle(e: GenericEventArguments):
        # If moved within its own list, ignore
        if e.args['from'] == e.args['to']:
            return

        if e.args['to'] == sortable2.html_id:  # Add handle
            element = sortable2.get_child_by_id(e.args['item'])
            if element is None:
                assert 'Element should not be None'
                return

            with element.default_slot.children[0].default_slot:
                ui.icon('drag_handle').classes('nicegui-sortable-handle')
            # Reverse to have the handle first
            element.default_slot.children[0].default_slot.children.reverse()
        else:  # Remove handle
            element = sortable1.get_child_by_id(e.args['item'])
            if element is None:
                assert 'Element should not be None'
                return

            element.default_slot.children[0].remove(element.default_slot.children[0].default_slot.children[0])

    with ui.row():
        with ui.card():
            ui.label('List 1').classes('text-h6')
            with ui.sortable({
                'group': {'name': 'event-debugging'},
                'filter': '.nicegui-sortable-filtered',  # Items with this class won't be draggable
                'multiDrag': True,  # Enable multiple selection with Ctrl/Cmd
                'multiDragKey': 'ctrl',
                'onMove': 'function(evt) { return false; }',  # Try thi
            },
                    on_end=on_end,
                    on_add=on_add,
                    on_change=on_change,
                    on_select=on_select,
                    on_deselect=on_deselect) as sortable1:
                for i in range(1, 6):
                    # Make one item non-draggable to test filtering
                    if i == 3:
                        with ui.card().classes('nicegui-sortable-filtered'):
                            ui.label(f'Filtered Item {i} (non-draggable)')
                    else:
                        with ui.card():
                            with ui.row().classes('flex flex-row flex-nowrap items-center'):
                                ui.label(f'Item {i} (hold Ctrl/Cmd to select multiple)')
            sortable1.on('sort_end', add_remove_handle)
            sortable1.on('sort_choose', on_choose)
            sortable1.on('sort_unchoose', on_unchoose)
            sortable1.on('sort_filter', on_filter)
            sortable1.on('sort_spill', on_spill)
            sortable1.on('sort_start', on_start)
            sortable1.on('sort_update', on_update)
            sortable1.on('sort_remove', on_remove)
            sortable1.on('sort_move', on_move)
            sortable1.on('sort_clone', on_clone)
            sortable1.on('sort_change', on_change)

        with ui.card():
            ui.label('List 2').classes('text-h6')
            with ui.sortable({
                'handle': '.nicegui-sortable-handle',
                'group': {'name': 'event-debugging'},
                'onMove': 'function(evt) { return false; }',  # Try thi
            },
                    on_end=on_end,
                    on_add=on_add,
                    on_change=on_change,
                    on_select=on_select,
                    on_deselect=on_deselect) as sortable2:
                for i in range(1, 4):
                    with ui.card():
                        with ui.row().classes('flex flex-row flex-nowrap items-center'):
                            ui.icon('drag_handle').classes('nicegui-sortable-handle')
                            ui.label(f'Item {i}')
            sortable2.on('sort_end', add_remove_handle)
            sortable2.on('sort_choose', on_choose)
            sortable2.on('sort_unchoose', on_unchoose)
            sortable2.on('sort_filter', on_filter)
            sortable2.on('sort_spill', on_spill)
            sortable2.on('sort_start', on_start)
            sortable2.on('sort_update', on_update)
            sortable2.on('sort_remove', on_remove)
            sortable2.on('sort_move', on_move)
            sortable2.on('sort_clone', on_clone)
            sortable2.on('sort_change', on_change)

def validation_with_revert() -> None:
    original_order = []

    def on_start(e: GenericEventArguments) -> None:
        """Store the original order of items."""
        nonlocal original_order
        # Store element IDs in order
        # original_order = [child for child in sortable1.default_slot.children]
        original_order = sortable1
        ui.notify(f"Saved order: {original_order} items")

    def on_end(e: GenericEventArguments, sortable1:ui.sortable) -> None:
        """Handle the end of a sorting event."""
        old_index = e.args["oldIndex"]
        new_index = e.args["newIndex"]

        # Validation: Don't allow moving first item to last position
        if old_index == 0 and new_index >= 2:
            ui.notify("Invalid move! Reverting...", color="negative")
            #sortable1.sort(list(original_order))
            sortable1.clear()

            with ui.card() as ee:
                ui.label("Try moving Item 1 to the bottom (will be reverted)").classes("text-h6")
                with ui.sortable() as sortable1:
                    sortable1.on("sort_start", on_start)
                    sortable1.on("sort_end", lambda e: on_end(e, ee))
                    for i in range(1, 5):
                        with ui.card():
                            ui.label(f"Item {i}")

        else:
            ui.notify(f"Valid move: {old_index} → {new_index}", color="positive")

    with ui.card() as ee:
        ui.label("Try moving Item 1 to the bottom (will be reverted)").classes("text-h6")
        with ui.sortable() as sortable1:
            sortable1.on("sort_start", on_start)
            sortable1.on("sort_end", lambda e: on_end(e, ee))
            for i in range(1, 5):
                with ui.card():
                    ui.label(f"Item {i}")

main_demo()
shared_lists()
true_cloning()
disable_sorting()
nested_sortables()
dynamic_list_management()
event_debugging()
event_debugging2()
validation_with_revert()


ui.run(title='NiceGUI Sortable 3.0 Example', reload=True)

mini sortable

"""A sortable nested tree controller."""

from nicegui import ui


class FlatSortController:
    """Controller for managing a flat structure of components."""

    def __init__(self, sortable_name: str) -> None:
        """Initialize the FlatSortController."""
        self.sortable_name = sortable_name
        self._selected_template = None
        self.sortable = ui.sortable({"group": sortable_name,
                                    "fallbackOnBody": True,
                                    "swapThreshold": 0.4}, on_change=lambda: ui.notify("Template list changed"))\

    @property
    def selected_template(self) -> str | None:
        """Get the selected template ID."""
        return self._selected_template

    @selected_template.setter
    def selected_template(self, template_id: str | None) -> None:
        """Set the selected template ID."""
        ui.notify(f"Selected template ID updated to: {template_id}")

        self._selected_template = template_id


    @classmethod
    def change_expansion_state(cls, expansion_element: ui.expansion, button: ui.button) -> None:
        """Toggle expansion programmatically (only from our button)."""
        new_value = not bool(expansion_element.value)
        expansion_element.set_value(new_value)

        if new_value:
            button.props("icon=arrow_drop_down").update()
            return

        button.props("icon=arrow_drop_up").update()

    def add_media_item(self) -> ui.sortable:
        """Add an expansion item to the parent element."""
        with self.sortable:  # noqa: PLR1702, SIM117

            with ui.expansion("", value=True).props('header-class="hover:bg-gray-200"')\
                .classes("grow min-w-0 gap-0 hover:bg-transparent")\
                .props("content-inset-level='0.75' expand-icon=none expand-icon-toggle expand-icon-class=remove_expansion_icon") as expansion:

                expansion.text = f"Expansion"

                with expansion.add_slot("header"), ui.row().classes("""
                        drag_handle flex items-center w-full gap-2 hover:bg-transparent
                        row_style_light border-4
                        dark:bg-[rgba(29,29,29,1)] dark:border-[#3a3b3f] dark:shadow-[0_4px_12px_rgba(0,0,0,0.6)]""") as row_header:
                    # row_header.on("click", lambda: self.on_selected(sortable_list))

                    ui.icon("drag_handle").classes("text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl")
                    ui.label("Expansion_a").classes("grow text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl")

                    toggle_btn = ui.button("", icon="arrow_drop_down", color=None).classes("ml-auto").props("flat")
                    toggle_btn.on("click.stop", lambda _: self.change_expansion_state(expansion, toggle_btn))

                    more_btn = ui.button("", icon="more_vert", color=None).classes("!text-black dark:!text-white").props("flat")
                    with more_btn:
                        with ui.menu().classes("p-2 pt-0").props("transition-show='rotate'") as menu:

                            with ui.row().classes("w-full flex-nowrap p-2 pl-0 gap-0.5 hover:bg-gray-200 dark:hover:bg-gray-700 cursor-pointer items-center red"):
                                ui.icon("copy_all", size="sm").classes("shrink-0 items-center")
                                ui.label("Kopier (ikke implementeret)").classes("grow text-left pl-1")


@ui.page("/")
async def index() -> None:
    media_sortable = FlatSortController("media_sortable")
    media_sortable.add_media_item()
    media_sortable.add_media_item()
    media_sortable.add_media_item()
    media_sortable.add_media_item()

if __name__ in {"__main__", "__mp_main__"}:
    ui.run(reload=True, title="Report builder", port=8080)

[evnchn]

use a weaker PC / laptop to notice the slowdown faster

I need your specs. For my N100 laptop it's always slow. For my M4 MacBook Air it's always fast. I'll need to hunt down something in between to test things.

[phifuh]

use a weaker PC / laptop to notice the slowdown faster

I need your specs. For my N100 laptop it's always slow. For my M4 MacBook Air it's always fast. I'll need to hunt down something in between to test things.

ryzen 1700x
gtx 1080
16gb
64bit win 10