[fix] Branding text customization initial loading issue

Achintha444 · Mar 6, 2024 · f77e5ef · f77e5ef
1 parent 78666b9
commit f77e5ef
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/.changeset/tender-tools-clap.md 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
@@ -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
@@ -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
@@ -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,