From fe5d56f489484f62cc258f159555f12109be4e76 Mon Sep 17 00:00:00 2001
From: Asim <asim@plasmic.app>
Date: Tue, 12 Nov 2024 01:28:00 +0500
Subject: [PATCH] chore(code-organization): re-organized code

GitOrigin-RevId: fcaf9fc0d925b9a11e2347b5ce295fd4bfb92b67
---
 .../components/sidebar/LeftGeneralTokensPanel.tsx    |  5 +----
 .../widgets/ColorPicker/client-token-resolver.tsx    |  6 +++++-
 platform/wab/src/wab/client/cseval.ts                | 10 +++++++++-
 platform/wab/src/wab/client/studio-ctx/view-ctx.ts   | 12 ++++--------
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/platform/wab/src/wab/client/components/sidebar/LeftGeneralTokensPanel.tsx b/platform/wab/src/wab/client/components/sidebar/LeftGeneralTokensPanel.tsx
index 4976ebe4935..4622c509229 100644
--- a/platform/wab/src/wab/client/components/sidebar/LeftGeneralTokensPanel.tsx
+++ b/platform/wab/src/wab/client/components/sidebar/LeftGeneralTokensPanel.tsx
@@ -123,10 +123,7 @@ const LeftGeneralTokensPanel = observer(function LeftGeneralTokensPanel() {
   );
 
   const [isTargeting, setIsTargeting] = React.useState(false);
-  const viewCtx = studioCtx?.focusedViewCtx();
-  const resolver = React.useCallback(useClientTokenResolver(), [
-    viewCtx?.isFirstRenderComplete,
-  ]);
+  const resolver = useClientTokenResolver();
 
   const getTokenValue = React.useCallback(
     (token: StyleToken) => {
diff --git a/platform/wab/src/wab/client/components/widgets/ColorPicker/client-token-resolver.tsx b/platform/wab/src/wab/client/components/widgets/ColorPicker/client-token-resolver.tsx
index 022a5234a8f..6310ae1922d 100644
--- a/platform/wab/src/wab/client/components/widgets/ColorPicker/client-token-resolver.tsx
+++ b/platform/wab/src/wab/client/components/widgets/ColorPicker/client-token-resolver.tsx
@@ -8,6 +8,7 @@ import {
   makeTokenResolver,
 } from "@/wab/shared/cached-selectors";
 import { StyleToken } from "@/wab/shared/model/classes";
+import * as React from "react";
 
 const RE_VARIABLE_REF = /var\((--[^)]+)\)/;
 
@@ -29,7 +30,10 @@ const RE_VARIABLE_REF = /var\((--[^)]+)\)/;
 export function useClientTokenResolver(): TokenValueResolver {
   const sc = useStudioCtx();
   const vc = sc.focusedViewCtx();
-  const resolver = makeTokenResolver(sc.site);
+
+  const resolver = React.useCallback(makeTokenResolver(sc.site), [
+    vc?.isFirstRenderComplete,
+  ]);
   return makeClientTokenResolver(resolver, vc ?? sc);
 }
 
diff --git a/platform/wab/src/wab/client/cseval.ts b/platform/wab/src/wab/client/cseval.ts
index 44f27353f5f..9551bf7c792 100644
--- a/platform/wab/src/wab/client/cseval.ts
+++ b/platform/wab/src/wab/client/cseval.ts
@@ -75,6 +75,14 @@ export abstract class BaseCliSvrEvaluator {
   private _postEvalTasks: (() => any)[] = [];
   private _contextFactory: ContextFactory;
   private _renderState: RenderState;
+  private _isFirstRenderComplete = observable.box(false);
+
+  get isFirstRenderComplete() {
+    return this._isFirstRenderComplete.get();
+  }
+  set isFirstRenderComplete(v) {
+    this._isFirstRenderComplete.set(v);
+  }
 
   constructor({ viewCtx }: { viewCtx: ViewCtx }) {
     this._viewCtx = viewCtx;
@@ -164,7 +172,7 @@ export abstract class BaseCliSvrEvaluator {
       this.rootNode = this.renderRoot();
       viewCtx.canvasCtx.rerender(this.rootNode, viewCtx);
       this.addPostEval(() => {
-        viewCtx.isFirstRenderComplete = true;
+        this.isFirstRenderComplete = true;
       });
     }
   }
diff --git a/platform/wab/src/wab/client/studio-ctx/view-ctx.ts b/platform/wab/src/wab/client/studio-ctx/view-ctx.ts
index 283c28ba709..9bec6b91309 100644
--- a/platform/wab/src/wab/client/studio-ctx/view-ctx.ts
+++ b/platform/wab/src/wab/client/studio-ctx/view-ctx.ts
@@ -174,6 +174,10 @@ export class ViewCtx extends WithDbCtx {
 
   csEvaluator: DevCliSvrEvaluator;
 
+  get isFirstRenderComplete() {
+    return this.csEvaluator.isFirstRenderComplete;
+  }
+
   private disposals: (() => void)[] = [];
   private _isDisposed = false;
 
@@ -182,14 +186,6 @@ export class ViewCtx extends WithDbCtx {
     return this._nextFocusedTpl;
   }
 
-  private _isFirstRenderComplete = observable.box(false);
-  get isFirstRenderComplete() {
-    return this._isFirstRenderComplete.get();
-  }
-  set isFirstRenderComplete(v) {
-    this._isFirstRenderComplete.set(v);
-  }
-
   private _highlightParam = observable.box<
     | {
         param: Param;