perf: Improve audit detail view loading time

[monsieurswag]

For a CJIS framework based Audit, the Audit detail view loading time passes from around 7 seconds to 1.3 seconds.

[coderabbitai]

Walkthrough

Conditional rendering was added so child RecursiveTreeViewItem components render only when their parent node’s id is present in expandedNodes. Previously, nested items rendered unconditionally under childrenSlot. No changes to events or bindings.

Changes

Cohort / File(s)	Summary
TreeView conditional child rendering frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte	Wrapped child RecursiveTreeViewItem block with {#if expandedNodes.includes(node.id)} to render nested nodes only when the parent is expanded; no alterations to exports or event handling.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant TreeViewItem as RecursiveTreeViewItem (Parent)
  participant State as expandedNodes
  participant Child as RecursiveTreeViewItem (Child)

  User->>TreeViewItem: Toggle expand/collapse
  TreeViewItem->>State: Update expandedNodes with node.id
  Note over TreeViewItem,State: expandedNodes.includes(node.id) determines rendering

  alt Parent expanded
    TreeViewItem->>Child: Render children (mount)
    Child-->>TreeViewItem: Child subtree renders
  else Parent collapsed
    TreeViewItem--X Child: Do not render children (unmounted/hidden)
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nudge a branch, it blooms in view,
A secret nest of leaves peek through.
When folded tight, the forest hides—
Expand, and all its paths abide.
Tap-tap, hop-hop, I prune the night—
Now trees reveal when just right. 🌿🐇

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Title Check	✅ Passed	The title succinctly highlights the main goal of the changeset—improving loading time for the audit detail view—which aligns with the conditional rendering updates in the TreeView component to boost performance. It is concise, clear, and specific enough for a reviewer to understand the intent without extraneous detail.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch perf/improve_audit_detail_view_loading_time

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte (1)

52-52: Consider using Array.from() for array initialization.

Array(nodes.length).fill([]) creates multiple references to the same empty array object. While Svelte's binding mechanism replaces each element correctly, using Array.from() is more explicit and avoids potential confusion:

-let childrenNodes: TreeViewItem[][] = $state(Array(nodes.length).fill([]));
+let childrenNodes: TreeViewItem[][] = $state(Array.from({ length: nodes.length }, () => []));

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e0cc9ec and 00ad435.

📒 Files selected for processing (1)

• frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: enterprise-startup-functional-test (3.12)
• GitHub Check: startup-docker-compose-test
• GitHub Check: startup-functional-test (3.12)
• GitHub Check: enterprise-startup-docker-compose-test
• GitHub Check: build_enterprise_frontend
• GitHub Check: build_community_frontend

🔇 Additional comments (1)

frontend/src/lib/components/TreeView/RecursiveTreeViewItem.svelte (1)

194-211: LGTM! Effective performance optimization.

Wrapping the recursive child rendering in {#if expandedNodes.includes(node.id)} prevents unnecessary component instantiation and DOM creation for collapsed nodes. This is especially beneficial for large tree structures and directly addresses the PR objective of improving loading time.

The approach is sound because:

• State (expandedNodes, checkedNodes, indeterminateNodes) is bound from the parent, so it persists across collapse/expand cycles
• The condition matches the open prop on line 165, ensuring consistency
• Event forwarding (lines 202-209) correctly propagates interactions from nested nodes

To ensure robustness, please verify:

1. Deeply nested trees render correctly when multiple levels are expanded
2. Node state (checked, indeterminate) is preserved after collapsing and re-expanding
3. The performance improvement is measurable in the audit detail view with large datasets