chore: decoupled property pane registration (#40851)

## 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"

### 🔍 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 -->

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")
   ) {

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();
 };