From e7a73e0f50e9f8801880c052c8c251c587a0add8 Mon Sep 17 00:00:00 2001
From: Ashit Rath <ashit@appsmith.com>
Date: Mon, 7 Jul 2025 09:55:09 +0530
Subject: [PATCH] chore: UI module instance generation placeholder on page load
 and change (#41082)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
This PR adds a placeholder saga to be called in page change or page load
operation of app to generate UI module instance. This is extended in EE

PR for https://github.com/appsmithorg/appsmith-ee/pull/7928

## 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/16070475917>
> Commit: 5fcbf3bf5d9be4ad503e5460a4743061acfd908c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=16070475917&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 04 Jul 2025 11:03:51 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

* **New Features**
* Improved handling of UI module instances when switching pages in both
edit and view modes, ensuring a smoother user experience during page
transitions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/ce/sagas/PageSagas.tsx | 12 +++++++++++-
 app/client/src/ce/sagas/helpers.ts    |  3 +++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/app/client/src/ce/sagas/PageSagas.tsx b/app/client/src/ce/sagas/PageSagas.tsx
index 2df78275c3..28555bcaa9 100644
--- a/app/client/src/ce/sagas/PageSagas.tsx
+++ b/app/client/src/ce/sagas/PageSagas.tsx
@@ -149,7 +149,10 @@ import {
   selectGitApplicationCurrentBranch,
 } from "selectors/gitModSelectors";
 import { appsmithTelemetry } from "instrumentation";
-import { getLayoutSavePayload } from "ee/sagas/helpers";
+import {
+  getLayoutSavePayload,
+  generateUIModuleInstanceSaga,
+} from "ee/sagas/helpers";
 import { apiFailureResponseInterceptor } from "api/interceptors/response";
 import type { AxiosError } from "axios";
 import { handleFetchApplicationError } from "./ApplicationSagas";
@@ -271,6 +274,8 @@ export function* handleFetchedPage({
     yield put(fetchSnapshotDetailsAction());
     // set current page
     yield put(updateCurrentPage(pageId, pageSlug, pagePermissions));
+    // Generate UI module instances when page DSL is loaded
+    yield call(generateUIModuleInstanceSaga);
     // dispatch fetch page success
     yield put(fetchPageSuccess());
 
@@ -449,6 +454,11 @@ export function* fetchPublishedPageResourcesSaga(
       }
 
       yield call(postFetchedPublishedPage, pageWithMigratedDsl, pageId);
+      // In view mode, the fetchPublishedPageResourcesSaga is called only
+      // when page is switched. So, we need to generate UI module instances.
+      // Whereas, setupPublishedPageSaga gets called on first time app load in view mode.
+      // This is differently done for some reason when compared to edit mode.
+      yield call(generateUIModuleInstanceSaga);
 
       // NOTE: fetchActionsForView is used here to update publishedActions in redux store and not to fetch actions again
       yield put(fetchActionsForView({ applicationId: "", publishedActions }));
diff --git a/app/client/src/ce/sagas/helpers.ts b/app/client/src/ce/sagas/helpers.ts
index 555fa1d837..adebc59be9 100644
--- a/app/client/src/ce/sagas/helpers.ts
+++ b/app/client/src/ce/sagas/helpers.ts
@@ -110,3 +110,6 @@ export function* getLayoutSavePayload(
     dsl: nestedDSL,
   };
 }
+
+// This is a placeholder saga and is extended in EE
+export function* generateUIModuleInstanceSaga() {}