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>

gui/default/index.html

@@ -410,8 +410,8 @@
                     </div>
                   </h4>
                 </button>
-                <div id="folder-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse">
+                <div id="folder-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse" lazy-collapse>
-                  <div class="panel-body less-padding">
+                  <div class="panel-body less-padding" ng-if="lazyReady">
                     <table class="table table-condensed table-striped table-auto">
                       <tbody>
                         <tr class="visible-xs">
@@ -686,8 +686,8 @@
                 <div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
               </h4>
             </button>
-            <div id="device-this" class="panel-collapse collapse in">
+            <div id="device-this" class="panel-collapse collapse in" lazy-collapse>
-              <div class="panel-body less-padding">
+              <div class="panel-body less-padding" ng-if="lazyReady">
                 <table class="table table-condensed table-striped table-auto">
                   <tbody>
                     <tr>
@@ -805,8 +805,8 @@
                       <div class="panel-title-text">{{deviceName(deviceCfg)}}</div>
                     </h4>
                   </button>
-                  <div id="device-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse">
+                  <div id="device-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse" lazy-collapse>
-                    <div class="panel-body less-padding">
+                    <div class="panel-body less-padding" ng-if="lazyReady">
                       <table class="table table-condensed table-striped table-auto">
                         <tbody>
                           <tr class="visible-xs">
@@ -1083,6 +1083,7 @@
   <script type="text/javascript" src="syncthing/core/popoverDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/syncthingController.js"></script>
   <script type="text/javascript" src="syncthing/core/tooltipDirective.js"></script>
+  <script type="text/javascript" src="syncthing/core/lazyCollapseDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/uncamelFilter.js"></script>
   <script type="text/javascript" src="syncthing/core/uniqueFolderDirective.js"></script>
   <script type="text/javascript" src="syncthing/core/validDeviceidDirective.js"></script>

gui/default/syncthing/core/lazyCollapseDirective.js

@@ -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;
+                    });
+                });
+            }
+        };
+    });