Refactor watch sources for reliability

This commit changes `WatchSource` signatures into `Readonly<Ref>`s.

It provides two important benefits:

1. Eliminates the possibility of `undefined` states, that's result of
   using `WatchSource`s. This previously required additional null checks.
   By using `Readonly<Ref>`, the state handling becomes simpler and less
   susceptible to null errors.
2. Optimizes performance by using references:
   - Avoids the reactive layer of `computed` references when not needed.
   - The `watch` syntax, such as `watch(() => ref.value)`, can introduce
     side effects. For example, it does not account for `triggerRef` in
     scenarios where the value remains unchanged, preventing the watcher
     from running (vuejs/core#9579).

src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts

@@ -1,5 +1,5 @@
 import {
-  WatchSource, shallowRef, triggerRef, watch,
+  type Ref, shallowRef, triggerRef, watch,
 } from 'vue';
 import { ReadOnlyTreeNode } from '../Node/TreeNode';
 import { useNodeStateChangeAggregator } from '../UseNodeStateChangeAggregator';
@@ -15,7 +15,7 @@ import { CollapsedParentOrderer } from './Ordering/CollapsedParentOrderer';
  * Renders tree nodes gradually to prevent UI freeze when loading large amounts of nodes.
  */
 export function useGradualNodeRendering(
-  treeWatcher: WatchSource<TreeRoot>,
+  treeRootRef: Readonly<Ref<TreeRoot>>,
   useChangeAggregator = useNodeStateChangeAggregator,
   useTreeNodes = useCurrentTreeNodes,
   scheduler: DelayScheduler = new TimeoutDelayScheduler(),
@@ -28,8 +28,8 @@ export function useGradualNodeRendering(
   let isRenderingInProgress = false;
   const renderingDelayInMs = 50;
 
-  const { onNodeStateChange } = useChangeAggregator(treeWatcher);
-  const { nodes } = useTreeNodes(treeWatcher);
+  const { onNodeStateChange } = useChangeAggregator(treeRootRef);
+  const { nodes } = useTreeNodes(treeRootRef);
 
   function updateNodeRenderQueue(node: ReadOnlyTreeNode, isVisible: boolean) {
     if (isVisible
@@ -48,7 +48,7 @@ export function useGradualNodeRendering(
     }
   }
 
-  watch(() => nodes.value, (newNodes) => {
+  watch(nodes, (newNodes) => {
     nodesToRender.clear();
     nodesBeingRendered.value.clear();
     if (!newNodes || newNodes.flattenedNodes.length === 0) {