From f77e5ef3ae0827b3a13a12b01e5b6d1ffb33536e Mon Sep 17 00:00:00 2001
From: Achintha Isuru <achinthaisuru.17@cse.mrt.ac.lk>
Date: Wed, 6 Mar 2024 11:22:20 +0530
Subject: [PATCH] [fix] Branding text customization initial loading issue

---
 .changeset/tender-tools-clap.md                       |  5 +++++
 .../components/custom-text/custom-text-fields.tsx     | 11 ++++++++---
 .../branding/context/branding-preference-context.tsx  |  4 ++++
 .../providers/branding-preference-provider.tsx        |  9 ++++++---
 4 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/tender-tools-clap.md

diff --git a/.changeset/tender-tools-clap.md b/.changeset/tender-tools-clap.md
new file mode 100644
index 00000000000..d1c050a04a0
--- /dev/null
+++ b/.changeset/tender-tools-clap.md
@@ -0,0 +1,5 @@
+---
+"@wso2is/console": patch
+---
+
+[fix] Branding text customization initial loading issue
diff --git a/apps/console/src/features/branding/components/custom-text/custom-text-fields.tsx b/apps/console/src/features/branding/components/custom-text/custom-text-fields.tsx
index cd124271d6a..4d205e756a1 100644
--- a/apps/console/src/features/branding/components/custom-text/custom-text-fields.tsx
+++ b/apps/console/src/features/branding/components/custom-text/custom-text-fields.tsx
@@ -87,6 +87,7 @@ const CustomTextFields: FunctionComponent<CustomTextFieldsProps> = (props: Custo
     const {
         customTextDefaults,
         customTextScreenMeta,
+        isCustomTextPreferenceFetching,
         updateCustomTextFormSubscription,
         selectedScreen,
         selectedLocale,
@@ -100,7 +101,7 @@ const CustomTextFields: FunctionComponent<CustomTextFieldsProps> = (props: Custo
         [ fields ]
     );
 
-    if (!fields) {
+    if (!fields || isCustomTextPreferenceFetching) {
         return (
             <Box className="branding-preference-custom-text-fields">
                 { [ ...Array(2) ].map((key: number) => (
@@ -120,7 +121,11 @@ const CustomTextFields: FunctionComponent<CustomTextFieldsProps> = (props: Custo
     };
 
     const renderInputAdornment = (fieldName: string): ReactElement => {
-        if (customTextDefaults[fieldName.replaceAll("_", ".")] === fields[fieldName.replaceAll("_", ".")]) {
+        const customTextDefaultsIsSameAsFields: boolean = customTextDefaults
+            ? customTextDefaults[fieldName.replaceAll("_", ".")] === fields[fieldName.replaceAll("_", ".")]
+            : false;
+
+        if (customTextDefaultsIsSameAsFields) {
             return null;
         }
 
@@ -212,7 +217,7 @@ const CustomTextFields: FunctionComponent<CustomTextFieldsProps> = (props: Custo
                                             ) }
                                             component={ TextFieldAdapter }
                                             multiline={ customTextScreenMeta &&
-                                                customTextScreenMeta[fieldName.replaceAll("_", ".")].MULTI_LINE }
+                                                customTextScreenMeta[fieldName.replaceAll("_", ".")]?.MULTI_LINE }
                                             size="small"
                                             maxLength={
                                                 CustomTextPreferenceConstants.FORM_FIELD_CONSTRAINTS.MAX_LENGTH
diff --git a/apps/console/src/features/branding/context/branding-preference-context.tsx b/apps/console/src/features/branding/context/branding-preference-context.tsx
index f843d40e32e..3f91133a93b 100644
--- a/apps/console/src/features/branding/context/branding-preference-context.tsx
+++ b/apps/console/src/features/branding/context/branding-preference-context.tsx
@@ -80,6 +80,10 @@ export interface BrandingPreferenceContextProps {
      * @returns Translated text.
      */
     i18n: (key: string, fallback: string) => string;
+    /**
+     * Fetching state of the custom text preference.
+     */
+    isCustomTextPreferenceFetching: boolean;
     /**
      * Sets the subscription for the custom text form.
      * @param subscription - Subscription to be set.
diff --git a/apps/console/src/features/branding/providers/branding-preference-provider.tsx b/apps/console/src/features/branding/providers/branding-preference-provider.tsx
index 7f085b0256a..db676e5bd4d 100644
--- a/apps/console/src/features/branding/providers/branding-preference-provider.tsx
+++ b/apps/console/src/features/branding/providers/branding-preference-provider.tsx
@@ -115,12 +115,14 @@ const BrandingPreferenceProvider: FunctionComponent<BrandingPreferenceProviderPr
     const {
         data: customText,
         error: customTextPreferenceFetchRequestError,
+        isLoading: isCustomTextPreferenceFetching,
         mutate: mutateCustomTextPreferenceFetchRequest
     } = useGetCustomTextPreferenceResolve(
         !!selectedScreen && !!selectedLocale,
         tenantDomain,
         selectedScreen,
-        selectedLocale);
+        selectedLocale
+    );
 
     const {
         data: customTextFallbackCommons
@@ -387,13 +389,14 @@ const BrandingPreferenceProvider: FunctionComponent<BrandingPreferenceProviderPr
                 },
                 i18n,
                 isCustomTextConfigured: customText && !isEqual(customText, customTextFallbacks),
+                isCustomTextPreferenceFetching: isCustomTextPreferenceFetching,
                 onSelectedLocaleChange: (locale: string): void => {
-                    setSelectedCustomTextLocale(locale);
                     setCustomTextFormSubscription(null);
+                    setSelectedCustomTextLocale(locale);
                 },
                 onSelectedPreviewScreenChange: (screen: PreviewScreenType): void => {
-                    setSelectedPreviewScreen(screen);
                     setCustomTextFormSubscription(null);
+                    setSelectedPreviewScreen(screen);
                 },
                 preference: brandingPreference,
                 resetAllCustomTextPreference: _deleteCustomTextPreference,