Note: this issue was drafted with AI assistance.
Summary
The project deposit page caps a project at 10 videos because the more videos there are, the more the UI laggs.
Below are the possible root cause and three fix proposals, ordered by potential gain, so the cap could be raised or removed.
Root cause
The page uses AngularJS's data binding, which relies on a digest cycle that re-evaluates every watcher on the page on each keystroke, scroll tick, returning request, or timer tick. Two things make this grow with the number of videos:
-
One sub-form per video. In deposits.html (line ~115), ng-repeat mounts a full <cds-deposit> for every video. Watchers scale with videos × fields, so editing one field triggers a digest that checks all videos, and more importantly all fields in all forms. (e.g. editing the title of Video 1 would trigger the watchers for all the fields of all the video forms).
-
Per-video polling. Each <cds-deposit> runs its own $interval (cdsDeposit.js line ~570). Every tick still triggers a full digest, so N videos means N digest triggers every 5s, even if the HTTP call is ignored.
Proposed fixes (ordered by impact)
- Lazy-render with
ng-if. Show a light summary row for collapsed videos and mount the heavy form only when a panel is active. ng-if removes the node from the DOM and the digest cycle (unlike ng-show).
⚠️ Edge cases to validate: autosave when a form is unmounted, pre-publish validation of collapsed videos, in-progress uploads surviving a collapse.
-
Single shared poller. Remove the per-instance $interval in cdsDeposit.js and lift one timer to the parent cdsDeposits, which fetches statuses once and distributes them. Replaces N digest triggers with one.
-
One-time bindings + debounce. Use {{::value}} for static content (labels, collapsed titles, frozen statuses) and ng-model-options="{ debounce: 300 }" on editable fields. This will in the end reduce the number of watchers, and number of triggers while the user writes of scrolls.
Acceptance criteria
- Page stays responsive with 50 to 100 videos (no input lag, smooth scrolling).
DEPOSIT_PROJECT_MAX_N_VIDEOS can be raised or removed safely.- Autosave, validation, and uploads work across collapse/expand.
Note: this issue was drafted with AI assistance.
Summary
The project deposit page caps a project at 10 videos because the more videos there are, the more the UI laggs.
Below are the possible root cause and three fix proposals, ordered by potential gain, so the cap could be raised or removed.
Root cause
The page uses AngularJS's data binding, which relies on a digest cycle that re-evaluates every watcher on the page on each keystroke, scroll tick, returning request, or timer tick. Two things make this grow with the number of videos:
One sub-form per video. In
deposits.html(line ~115),ng-repeatmounts a full<cds-deposit>for every video. Watchers scale withvideos × fields, so editing one field triggers a digest that checks all videos, and more importantly all fields in all forms. (e.g. editing the title of Video 1 would trigger the watchers for all the fields of all the video forms).Per-video polling. Each
<cds-deposit>runs its own$interval(cdsDeposit.jsline ~570). Every tick still triggers a full digest, so N videos means N digest triggers every 5s, even if the HTTP call is ignored.Proposed fixes (ordered by impact)
ng-if. Show a light summary row for collapsed videos and mount the heavy form only when a panel is active.ng-ifremoves the node from the DOM and the digest cycle (unlikeng-show).Single shared poller. Remove the per-instance
$intervalincdsDeposit.jsand lift one timer to the parentcdsDeposits, which fetches statuses once and distributes them. Replaces N digest triggers with one.One-time bindings + debounce. Use
{{::value}}for static content (labels, collapsed titles, frozen statuses) andng-model-options="{ debounce: 300 }"on editable fields. This will in the end reduce the number of watchers, and number of triggers while the user writes of scrolls.Acceptance criteria
DEPOSIT_PROJECT_MAX_N_VIDEOScan be raised or removed safely.