fix: Anvil Modal rendering issues when added via property pane.

app/client/src/layoutSystems/anvil/editor/AnvilEditorDetachedWidgetOnion.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
-import { AnvilWidgetComponent } from "../common/widgetComponent/AnvilWidgetComponent";
 import { useObserveDetachedWidget } from "layoutSystems/common/utils/LayoutElementPositionsObserver/usePositionObserver";
 import {
   useAddBordersToDetachedWidgets,
   useHandleDetachedWidgetSelect,
 } from "layoutSystems/anvil/common/hooks/detachedWidgetHooks";
+import { AnvilErrorBoundary } from "../common/widgetComponent/AnvilErrorBoundary";
+import { SKELETON_WIDGET_TYPE } from "constants/WidgetConstants";
 
 /**
  * AnvilEditorDetachedWidgetOnion
@@ -18,14 +19,12 @@ import {
  *
  * @returns Enhanced Widget
  */
-export const AnvilEditorDetachedWidgetOnion = (
-  props: BaseWidgetProps,
-): JSX.Element => {
+export const AnvilEditorDetachedWidgetOnion = (props: BaseWidgetProps) => {
   useObserveDetachedWidget(props.widgetId);
   useHandleDetachedWidgetSelect(props.widgetId);
   useAddBordersToDetachedWidgets(props.widgetId, props.type);
 
-  return (
-    <AnvilWidgetComponent {...props}>{props.children}</AnvilWidgetComponent>
-  );
+  return props.type !== SKELETON_WIDGET_TYPE ? (
+    <AnvilErrorBoundary {...props}>{props.children}</AnvilErrorBoundary>
+  ) : null;
 };

app/client/src/layoutSystems/anvil/integrations/modalSelectors.ts

@@ -1,15 +1,27 @@
 import type { AppState } from "@appsmith/reducers";
+import memoize from "micro-memoize";
 import { getAllDetachedWidgetIds, getWidgetsMeta } from "sagas/selectors";
 
+const getCurrentlyOpenWidgets = memoize(
+  (allExistingDetachedWidgets: string[], metaWidgets: Record<string, any>) => {
+    return allExistingDetachedWidgets.filter((modalId) => {
+      const modal = metaWidgets[modalId];
+      return modal && modal.isVisible;
+    });
+  },
+);
+
 export const getCurrentlyOpenAnvilDetachedWidgets = (state: AppState) => {
-  const allExistingDetachedWidgets = getAllDetachedWidgetIds(state);
+  const allExistingDetachedWidgets = getAllDetachedWidgetIds(
+    state.entities.canvasWidgets,
+  );
   if (allExistingDetachedWidgets.length === 0) {
     return [];
   }
   const metaWidgets = getWidgetsMeta(state);
-  const currentlyOpenWidgets = allExistingDetachedWidgets.filter((modalId) => {
-    const modal = metaWidgets[modalId];
-    return modal && modal.isVisible;
-  });
+  const currentlyOpenWidgets = getCurrentlyOpenWidgets(
+    allExistingDetachedWidgets,
+    metaWidgets,
+  );
   return currentlyOpenWidgets;
 };

app/client/src/layoutSystems/anvil/viewer/AnvilViewerDetachedWidgetOnion.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 
 import type { BaseWidgetProps } from "widgets/BaseWidgetHOC/withBaseWidgetHOC";
-import { AnvilWidgetComponent } from "../common/widgetComponent/AnvilWidgetComponent";
+import { AnvilErrorBoundary } from "../common/widgetComponent/AnvilErrorBoundary";
+import { SKELETON_WIDGET_TYPE } from "constants/WidgetConstants";
 
 /**
  * AnvilViewerDetachedWidgetOnion
@@ -15,7 +16,7 @@ import { AnvilWidgetComponent } from "../common/widgetComponent/AnvilWidgetCompo
  * @returns Enhanced Widget
  */
 export const AnvilViewerDetachedWidgetOnion = (props: BaseWidgetProps) => {
-  return (
-    <AnvilWidgetComponent {...props}>{props.children}</AnvilWidgetComponent>
-  );
+  return props.type !== SKELETON_WIDGET_TYPE ? (
+    <AnvilErrorBoundary {...props}>{props.children}</AnvilErrorBoundary>
+  ) : null;
 };

app/client/src/sagas/selectors.tsx

@@ -77,11 +77,13 @@ export const getWidgetIdsByType = (state: AppState, type: WidgetType) => {
     .map((widget: FlattenedWidgetProps) => widget.widgetId);
 };
 
-export const getAllDetachedWidgetIds = (state: AppState) => {
-  return Object.values(state.entities.canvasWidgets)
-    .filter((widget: FlattenedWidgetProps) => !!widget.detachFromLayout)
-    .map((widget: FlattenedWidgetProps) => widget.widgetId);
-};
+export const getAllDetachedWidgetIds = memoize(
+  (canvasWidgets: CanvasWidgetsReduxState) => {
+    return Object.values(canvasWidgets)
+      .filter((widget: FlattenedWidgetProps) => !!widget.detachFromLayout)
+      .map((widget: FlattenedWidgetProps) => widget.widgetId);
+  },
+);
 
 export const getWidgetOptionsTree = memoize((state: AppState) =>
   Object.values(state.entities.canvasWidgets)