felixfoertsch/syncthing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Frederic
2026-07-20 21:03:53 +00:00
committed by GitHub
parent 9f7b4d4104
commit d73c00799b
2 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gui/default/index.html
+7 -6
View File
@@ -410,8 +410,8 @@
</div>
</h4>
</button>
<div id="folder-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse">
<div class="panel-body less-padding">
<div id="folder-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse" lazy-collapse>
<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 class="panel-body less-padding">
<div id="device-this" class="panel-collapse collapse in" lazy-collapse>
<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 class="panel-body less-padding">
<div id="device-{{$parent.$index}}-{{$index}}" class="panel-collapse collapse" lazy-collapse>
<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
+25
View File
@@ -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;
});
});
}
};
});