Optimize performance of large Angular form

[Pyatakov]

Problem description

Currently, creating a new document, restoring from a draft, or viewing an existing document – all of which render a form containing 1000+ input fields (including deeply nested structures) – results in significant performance degradation. The component suffers from slow rendering and, in extreme cases, causes the browser to crash due to excessive memory usage. The frontend is built with Angular and uses standard @angular/forms.

This behavior not only impacts user experience but also introduces risk of data loss, especially when restoring large drafts or editing long documents. Optimization is critical for system stability and usability.

Requirements

1. Investigate current form rendering logic and memory consumption patterns
2. Identify causes of performance bottlenecks (e.g., form control initialization, change detection, DOM bloat)
3. Apply architectural or component-level optimizations
4. Ensure draft restore and document creation flows remain intact
5. Preserve validation logic and error messaging UX
6. Maintain compatibility with nested schemas and dynamic form generation

Definition of done

• Form loads and becomes interactive within a reasonable time (target < 5s)
• Memory footprint remains stable during form usage and does not exceed limits that could crash common browsers
• All existing features (validation, draft restore, editing) continue to work as expected

Acceptance criteria

1. Opening a document with 1000+ fields does not crash the browser with default settings
2. Performance benchmark shows at least 50% improvement in load/render time compared to current implementation
3. User can interact with the form (e.g., typing, toggling sections) without perceptible lag
4. No regression in form save/restore/edit behavior verified