From e6cebfd3cceedbaf41e011eab0f16f0c4ef867f0 Mon Sep 17 00:00:00 2001
From: Vemparala Surya Vamsi <121419957+vsvamsi1@users.noreply.github.com>
Date: Thu, 5 Jun 2025 16:25:49 +0530
Subject: [PATCH] chore: decoupled property pane registration (#40851)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
Decoupled property registration code and lazily initialise it in the
property pane component.


Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.All"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/15461239247>
> Commit: 9c70387f49a2f6dd53dbcd824a31b458aa4d0e2c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=15461239247&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 05 Jun 2025 08:50:15 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Improved loading behavior in the property pane to ensure all controls
are fully ready before display, resulting in a smoother user experience.

- **Bug Fixes**
- Prevented the property pane from rendering incomplete or missing
controls during loading.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/pages/Editor/PropertyPane/index.tsx   | 24 ++++++++++++++++++-
 app/client/src/utils/editor/EditorUtils.ts    |  2 --
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/client/src/pages/Editor/PropertyPane/index.tsx b/app/client/src/pages/Editor/PropertyPane/index.tsx
index 58a91673af..16b030e313 100644
--- a/app/client/src/pages/Editor/PropertyPane/index.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/index.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useEffect, useState } from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
 import { PanelStack, Classes } from "@blueprintjs/core";
@@ -6,6 +6,7 @@ import { PanelStack, Classes } from "@blueprintjs/core";
 import { get } from "lodash";
 import { getSelectedWidgets } from "selectors/ui";
 import PropertyPaneView from "./PropertyPaneView";
+import { retryPromise } from "utils/AppsmithUtils";
 
 const StyledPanelStack = styled(PanelStack)`
   height: 100%;
@@ -28,8 +29,29 @@ function PropertyPane() {
   const selectedWidgets = useSelector(getSelectedWidgets);
   const panelWrapperRef = useRef<HTMLDivElement>(null);
 
+  // Track registration state
+  const [controlsRegistered, setControlsRegistered] = useState(false);
+
+  useEffect(() => {
+    const loadPropertyControlBuilders = async () => {
+      const module = await retryPromise(
+        async () =>
+          import(
+            /* webpackChunkName: "PropertyControlRegistry" */ "utils/PropertyControlRegistry"
+          ),
+      );
+
+      module.default.registerPropertyControlBuilders();
+
+      setControlsRegistered(true);
+    };
+
+    loadPropertyControlBuilders();
+  }, []);
+
   // TODO: add analytics code
   if (
+    !controlsRegistered ||
     selectedWidgets.length === 0 ||
     get(selectedWidgets, "0.disablePropertyPane")
   ) {
diff --git a/app/client/src/utils/editor/EditorUtils.ts b/app/client/src/utils/editor/EditorUtils.ts
index 52ce8faa1a..138da365f2 100644
--- a/app/client/src/utils/editor/EditorUtils.ts
+++ b/app/client/src/utils/editor/EditorUtils.ts
@@ -1,4 +1,3 @@
-import PropertyControlRegistry from "../PropertyControlRegistry";
 // import WidgetFactory from "WidgetProvider/factory";
 // import Widgets from "widgets";
 import { registerWidgets } from "WidgetProvider/factory/registrationHelper";
@@ -11,7 +10,6 @@ export const registerEditorWidgets = () => {
 
 export const editorInitializer = async () => {
   registerEditorWidgets();
-  PropertyControlRegistry.registerPropertyControlBuilders();
   // TODO: do this only for anvil.
   registerLayoutComponents();
 };