chore(gui): lazy-render collapsed panels to reduce watcher count (#10772)

Adds a `lazyCollapse` directive that renders panel body content only while expanded. Collapsed panels contribute zero watchers — content is added to the DOM on expand (`show.bs.collapse`) and removed after the collapse animation completes (`hidden.bs.collapse`). Signed-off-by: Finomosec <1665799+Finomosec@users.noreply.github.com>
2026-07-20 21:03:53 +00:00
parent 9f7b4d4104
commit d73c00799b
2 changed files with 32 additions and 6 deletions
@@ -0,0 +1,25 @@
+angular.module('syncthing.core')
+    .directive('lazyCollapse', function () {
+        return {
+            restrict: 'A',
+            link: function (scope, element) {
+                // Render panel content only while expanded. Collapsed panels
+                // contribute zero watchers. Bootstrap's show/hidden events
+                // fire before/after the animation, so the DOM is present
+                // during the transition.
+                scope.lazyReady = element.hasClass('in');
+
+                $(element).on('show.bs.collapse', function () {
+                    scope.$apply(function () {
+                        scope.lazyReady = true;
+                    });
+                });
+
+                $(element).on('hidden.bs.collapse', function () {
+                    scope.$apply(function () {
+                        scope.lazyReady = false;
+                    });
+                });
+            }
+        };
+    });