diff --git a/app/web/src/nova/ed/panel/tree/node/item/name.tsx b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
index 63d690b7..82af56bb 100644
--- a/app/web/src/nova/ed/panel/tree/node/item/name.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/item/name.tsx
@@ -2,6 +2,7 @@ import { NodeModel, RenderParams } from "@minoru/react-dnd-treeview";
 import { FC, useEffect } from "react";
 import { useGlobal, useLocal } from "web-utils";
 import { EDGlobal, EdMeta } from "../../../../logic/ed-global";
+import { Tooltip } from "../../../../../../utils/ui/tooltip";
 
 export const EdTreeName = ({
   node,
@@ -71,7 +72,7 @@ export const EdTreeName = ({
             p.render();
           }}
         />
-      ) : ( 
+      ) : (
         <div className="flex flex-col">
           <Name name={node.text} is_jsx_prop={is_jsx_prop} />
           {/* <div className={"text-[9px] text-gray-500 -mt-1"}>{node.id} - {item.originalId}</div> */}
@@ -88,9 +89,12 @@ const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
   if (is_jsx_prop) {
     return (
       <div className="flex items-center space-x-1">
-        <div className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[6px] px-[2px]">
+        <Tooltip
+          content={`Type: JSX Prop`}
+          className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[6px] px-[2px]"
+        >
           P
-        </div>
+        </Tooltip>
         <div>{name}</div>
       </div>
     );
diff --git a/app/web/src/nova/ed/panel/tree/node/render.tsx b/app/web/src/nova/ed/panel/tree/node/render.tsx
index ba7b9dc5..4e966ca0 100644
--- a/app/web/src/nova/ed/panel/tree/node/render.tsx
+++ b/app/web/src/nova/ed/panel/tree/node/render.tsx
@@ -2,13 +2,14 @@ import { NodeRender } from "@minoru/react-dnd-treeview";
 import { useGlobal, useLocal } from "web-utils";
 import { Loading } from "../../../../../utils/ui/loading";
 import { EDGlobal, EdMeta, active } from "../../../logic/ed-global";
+import { getMetaById } from "../../../logic/tree/build";
 import { EdTreeAction } from "./item/action";
 import { EdTreeCtxMenu } from "./item/ctx-menu";
 import { EdTreeIndent } from "./item/indent";
 import { EdTreeName } from "./item/name";
 import { treeItemKeyMap } from "./key-map";
-import { useEffect } from "react";
-import { getMetaById } from "../../../logic/tree/build";
+
+const jsxPropLoadingRender = {} as Record<string, string>;
 
 export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
   const p = useGlobal(EDGlobal, "EDITOR");
@@ -27,6 +28,29 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
     );
   }
 
+  if (node.data?.jsx_prop_name) {
+    const meta = getMetaById(p, node.data?.parent_item.id);
+    if (meta) {
+      if (meta.propvis) {
+        if (meta.propvis[node.data.jsx_prop_name] === false) return <></>;
+      } else {
+        if (!jsxPropLoadingRender[meta.item.id]) {
+          jsxPropLoadingRender[meta.item.id] = node.data.jsx_prop_name;
+        }
+        if (jsxPropLoadingRender[meta.item.id] === node.data.jsx_prop_name) {
+          return (
+            <div
+              className={"relative border-b flex items-stretch min-h-[26px]"}
+            >
+              <Loading backdrop={false} />
+            </div>
+          );
+        }
+        return <></>;
+      }
+    }
+  }
+
   return (
     <div
       ref={(el) => {