feat: make features call a blocking API call for page load (#27974)

## Description

Make features call a blocking API call for page load

#### PR fixes following issue(s)
Fixes #27973

#### Media

#### Type of change
> Please delete options that are not relevant.
- Chore (housekeeping or task changes that don't impact user perception)
## 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
- [x] 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

(cherry picked from commit be7f6674f7)

app/client/src/ce/AppRouter.tsx

@@ -45,7 +45,10 @@ import * as Sentry from "@sentry/react";
 import { getSafeCrash, getSafeCrashCode } from "selectors/errorSelectors";
 import UserProfile from "pages/UserProfile";
 import { getCurrentUser } from "actions/authActions";
-import { getCurrentUserLoading } from "selectors/usersSelectors";
+import {
+  getCurrentUserLoading,
+  getFeatureFlagsFetching,
+} from "selectors/usersSelectors";
 import Setup from "pages/setup";
 import SettingsLoader from "pages/AdminSettings/loader";
 import SignupSuccess from "pages/setup/SignupSuccess";
@@ -153,6 +156,7 @@ function AppRouter(props: {
   } = props;
   const tenantIsLoading = useSelector(isTenantLoading);
   const currentUserIsLoading = useSelector(getCurrentUserLoading);
+  const featuresIsLoading = useSelector(getFeatureFlagsFetching);
 
   useEffect(() => {
     getCurrentUser();
@@ -166,7 +170,11 @@ function AppRouter(props: {
 
   // hide the top loader once the tenant is loaded
   useEffect(() => {
-    if (tenantIsLoading === false && currentUserIsLoading === false) {
+    if (
+      tenantIsLoading === false &&
+      currentUserIsLoading === false &&
+      featuresIsLoading === false
+    ) {
       const loader = document.getElementById("loader") as HTMLDivElement;
 
       if (loader) {
@@ -177,9 +185,9 @@ function AppRouter(props: {
         });
       }
     }
-  }, [tenantIsLoading, currentUserIsLoading]);
+  }, [tenantIsLoading, currentUserIsLoading, featuresIsLoading]);
 
-  if (tenantIsLoading || currentUserIsLoading) return null;
+  if (tenantIsLoading || currentUserIsLoading || featuresIsLoading) return null;
 
   return (
     <Router history={history}>

app/client/src/reducers/uiReducers/usersReducer.ts

@@ -24,6 +24,7 @@ const initialState: UsersReduxState = {
   featureFlag: {
     data: DEFAULT_FEATURE_FLAG_VALUE,
     isFetched: false,
+    isFetching: true,
   },
   productAlert: {
     config: {
@@ -173,6 +174,14 @@ const usersReducer = createReducer(initialState, {
       photoId: action.payload.photoId,
     },
   }),
+  [ReduxActionTypes.FETCH_FEATURE_FLAGS_INIT]: (state: UsersReduxState) => ({
+    ...state,
+    featureFlag: {
+      ...state.featureFlag,
+      isFetched: false,
+      isFetching: true,
+    },
+  }),
   [ReduxActionTypes.FETCH_FEATURE_FLAGS_SUCCESS]: (
     state: UsersReduxState,
     action: ReduxAction<FeatureFlags>,
@@ -181,6 +190,7 @@ const usersReducer = createReducer(initialState, {
     featureFlag: {
       data: action.payload,
       isFetched: true,
+      isFetching: false,
     },
   }),
   [ReduxActionErrorTypes.FETCH_FEATURE_FLAGS_ERROR]: (
@@ -190,6 +200,7 @@ const usersReducer = createReducer(initialState, {
     featureFlag: {
       data: {},
       isFetched: true,
+      isFetching: false,
     },
   }),
   [ReduxActionTypes.FETCH_PRODUCT_ALERT_SUCCESS]: (
@@ -252,6 +263,7 @@ export interface UsersReduxState {
   featureFlag: {
     isFetched: boolean;
     data: FeatureFlags;
+    isFetching: boolean;
   };
   productAlert: ProductAlertState;
 }

app/client/src/selectors/usersSelectors.tsx

@@ -5,16 +5,24 @@ import { ANONYMOUS_USERNAME } from "constants/userConstants";
 
 export const getCurrentUser = (state: AppState): User | undefined =>
   state.ui?.users?.currentUser;
+
 export const getCurrentUserLoading = (state: AppState): boolean =>
   state.ui.users.loadingStates.fetchingUser;
+
 export const getUserAuthError = (state: AppState): string =>
   state.ui.users.error;
+
 export const getUsers = (state: AppState): User[] => state.ui.users.users;
+
 export const getProppanePreference = (
   state: AppState,
 ): PropertyPanePositionConfig | undefined => state.ui.users.propPanePreferences;
+
 export const getFeatureFlagsFetched = (state: AppState) =>
   state.ui.users.featureFlag.isFetched;
 
+export const getFeatureFlagsFetching = (state: AppState) =>
+  state.ui.users.featureFlag.isFetching;
+
 export const getIsUserLoggedIn = (state: AppState): boolean =>
   state.ui.users.currentUser?.email !== ANONYMOUS_USERNAME;