fix: re-render of pages section (#30375)

## Description

Pages section in editor pane was getting rendered everytime when a page
selection is made. This PR fixes that issue.

#### PR fixes following issue(s)
Fixes https://github.com/appsmithorg/appsmith/issues/30367


#### Type of change

- Bug fix (non-breaking change which fixes an issue)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed


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

## Summary by CodeRabbit

- **New Features**
	- Introduced a new component for page management in the editor.
- **Refactor**
	- Simplified the rendering logic in the `EditorPane`.
- Optimized performance by memoizing the `LeftPane` and `IDE`
components.
- **Style**
	- Updated component imports to match new file structure.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

app/client/src/pages/Editor/IDE/EditorPane/components/Pages.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useSelector } from "react-redux";
+
+import { default as OldPages } from "pages/Editor/Explorer/Pages";
+import { PagesSection } from "../PagesSection";
+import {
+  getIsSideBySideEnabled,
+  getPagesActiveStatus,
+} from "selectors/ideSelectors";
+
+const Pages = () => {
+  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
+  const pagesActive = useSelector(getPagesActiveStatus);
+
+  if (!isSideBySideEnabled) {
+    return <OldPages />;
+    /* divider is inside the Pages component */
+  } else if (isSideBySideEnabled && pagesActive) {
+    return <PagesSection />;
+  } else {
+    return null;
+  }
+};
+
+export { Pages };

app/client/src/pages/Editor/IDE/EditorPane/index.tsx

@@ -4,35 +4,19 @@ import type { RouteComponentProps } from "react-router";
 import { Switch } from "react-router";
 import { useSelector } from "react-redux";
 
-import Pages from "pages/Editor/Explorer/Pages";
 import { SentryRoute } from "@appsmith/AppRouter";
 import { ADD_PATH } from "constants/routes";
 import EditorPaneSegments from "./EditorPaneSegments";
 import GlobalAdd from "./GlobalAdd";
 import { useEditorPaneWidth } from "../hooks";
-import {
-  getIsSideBySideEnabled,
-  getPagesActiveStatus,
-} from "selectors/ideSelectors";
+import { getPagesActiveStatus } from "selectors/ideSelectors";
 import EntityProperties from "pages/Editor/Explorer/Entity/EntityProperties";
-import { PagesSection } from "./PagesSection";
 import { MinimalSegment } from "./MinimalSegment";
+import { Pages } from "./components/Pages";
 
 const EditorPane = ({ match: { path } }: RouteComponentProps) => {
   const width = useEditorPaneWidth();
   const pagesActive = useSelector(getPagesActiveStatus);
-  const isSideBySideEnabled = useSelector(getIsSideBySideEnabled);
-
-  const PagesRender = () => {
-    if (!isSideBySideEnabled) {
-      return <Pages />;
-      /* divider is inside the Pages component */
-    } else if (isSideBySideEnabled && pagesActive) {
-      return <PagesSection />;
-    } else {
-      return null;
-    }
-  };
 
   return (
     <Flex
@@ -46,7 +30,7 @@ const EditorPane = ({ match: { path } }: RouteComponentProps) => {
       {/** Entity Properties component is needed to render
         the Bindings popover in the context menu. Will be removed eventually **/}
       <EntityProperties />
-      <PagesRender />
+      <Pages />
 
       {pagesActive ? (
         <MinimalSegment />

app/client/src/pages/Editor/IDE/index.tsx

@@ -54,4 +54,4 @@ function IDE() {
 
 IDE.displayName = "AppsmithIDE";
 
-export default IDE;
+export default React.memo(IDE);