perf(gui): yield to Tk event loop during table/component rendering

- Yield every 20 rendered rows in the parameter editor to keep
  the UI responsive during large table builds
- Yield every 5 components in the component editor for the same reason

Author: amilcarlucas

ardupilot_methodic_configurator/frontend_tkinter_component_editor_base.py

@@ -350,8 +350,11 @@ def set_combobox_entries_preserving_width(
     def populate_frames(self) -> None:
         """Populates the ScrollFrame with widgets based on the JSON data."""
         components = self.data_model.get_all_components()
-        for key, value in components.items():
+        for i, (key, value) in enumerate(components.items(), 1):
             self.add_widget(self.scroll_frame.view_port, key, value, [])
+            if i % 5 == 0:  # yield to the event loop periodically to keep the UI responsive
+                self.scroll_frame.view_port.update_idletasks()
+
         # Scroll to the top after (re-)populating
         self.scroll_frame.canvas.yview("moveto", 0)
 

ardupilot_methodic_configurator/frontend_tkinter_parameter_editor_table.py

@@ -232,6 +232,8 @@ def _update_table(self, params: dict[str, ArduPilotParameter], gui_complexity: s
                 if self.parameter_editor.should_display_bitmask_parameter_editor_usage(param_name):
                     should_try_to_display_bitmask_parameter_editor_usage = True
                 self._grid_column_widgets(row_widgets, i, show_upload_column)
+                if i % 20 == 0:
+                    self.view_port.update_idletasks()  # yield to the event loop periodically to keep the UI responsive
 
             # Add the "Add" button at the bottom of the table
             add_button = ttk.Button(self.view_port, text=_("Add"), style="narrow.TButton", command=self._on_parameter_add)

tests/test_frontend_tkinter_component_editor_base.py

@@ -777,6 +777,25 @@ def test_user_can_interact_with_different_widget_types(
         # Assert: Widget addition should be called for both cases
         assert editor_with_realistic_data._add_widget.call_count == 2
 
+    def test_populate_frames_yields_to_event_loop_every_five_components(
+        self, editor_with_realistic_data: ComponentEditorWindowBase
+    ) -> None:
+        """
+        populate_frames yields to the Tk event loop every fifth component to keep the UI responsive.
+
+        GIVEN: An editor with more than five components to display
+        WHEN: populate_frames is called
+        THEN: update_idletasks is called once per complete group of five components
+        """
+        num_components = 15  # expect floor(15 / 5) == 3 yields
+        components = {f"Component_{i}": {"value": i} for i in range(num_components)}
+        editor_with_realistic_data.data_model.get_all_components.return_value = components
+
+        editor_with_realistic_data.populate_frames()
+
+        expected_yields = num_components // 5
+        assert editor_with_realistic_data.scroll_frame.view_port.update_idletasks.call_count == expected_yields
+
 
 class TestComplexityComboboxWorkflows:
     """Test user workflows for GUI complexity management."""

tests/test_frontend_tkinter_parameter_editor_table.py

@@ -1703,6 +1703,33 @@ def test_update_table_creates_add_button_with_tooltip(self, parameter_editor_tab
             tooltip_call_args = mock_tooltip.call_args[0]
             assert "Add a parameter to the test_file.param file" in tooltip_call_args[1]
 
+    def test_update_table_yields_to_event_loop_every_twenty_rows(self, parameter_editor_table) -> None:
+        """
+        Table update yields to the event loop periodically during large renders.
+
+        GIVEN: More than twenty parameters to render
+        WHEN: The table is updated
+        THEN: The viewport idletasks are processed every twentieth row
+        """
+        params = {
+            f"TEST_PARAM_{index:02d}": create_mock_data_model_ardupilot_parameter(
+                name=f"TEST_PARAM_{index:02d}", value=float(index)
+            )
+            for index in range(1, 46)
+        }
+
+        with (
+            patch.object(parameter_editor_table, "_create_column_widgets", return_value=[MagicMock() for _ in range(7)]),
+            patch.object(parameter_editor_table, "_grid_column_widgets"),
+            patch.object(parameter_editor_table, "_configure_table_columns"),
+            patch.object(parameter_editor_table.view_port, "update_idletasks") as mock_update_idletasks,
+            patch("tkinter.ttk.Button"),
+            patch("ardupilot_methodic_configurator.frontend_tkinter_parameter_editor_table.show_tooltip"),
+        ):
+            parameter_editor_table._update_table(params, "simple")
+
+        assert mock_update_idletasks.call_count == 2
+
     def test_create_flightcontroller_value_sets_correct_background_colors(self, parameter_editor_table) -> None:  # pylint: disable=too-many-statements # noqa: PLR0915
         """
         Flight controller value labels display with appropriate background colors based on parameter state.