@capillarytech/creatives-library 8.0.223-alpha.0 → 8.0.223-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.223-alpha.0",
+  "version": "8.0.223-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CapPageSpinner/index.js

@@ -0,0 +1,23 @@
+import { CapSpin } from "@capillarytech/cap-ui-library";
+import React from "react";
+import { injectIntl } from "react-intl";
+import messages from './messages';
+import "./index.scss";
+
+export const CapPageSpinner = (props) => {
+
+    const renderedContent = () => {
+        return (
+            <div className="cap-custom-page-spinner">
+                <CapSpin spinning={props.spinning}>
+                    {props.children}
+                </CapSpin>
+                {<span className="cap-custom-page-spinner-text">{props.spinning &&  props.intl.formatMessage(messages.text)}</span>}
+            </div>
+        )
+    }
+
+    return renderedContent();
+};
+
+export default injectIntl(CapPageSpinner);

package/v2Components/CapPageSpinner/index.scss

@@ -0,0 +1,15 @@
+.cap-custom-page-spinner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: 20px;
+  text-align: center;
+  gap: 10px;
+  
+  .cap-custom-page-spinner-text {
+    color: #5E6C84;
+    font-size: 16px;
+  }
+}

package/v2Components/CapPageSpinner/messages.js

@@ -0,0 +1,13 @@
+/*
+ * CapPageSpinner Messages
+ *
+ * This contains all the text for the CapPageSpinner component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  text: {
+    id: 'creatives.componentsV2.CapPageSpinner.text',
+    defaultMessage: 'Loading More Templates',
+  },
+});

package/v2Components/Pagination/_pagination.scss

@@ -1,5 +1,5 @@
 .pagination-container{
-  height: calc(100vh - 182px);
+  height: calc(100vh - 400px);
   overflow-y: auto;
   overflow-x: hidden;
 }

package/v2Components/TestAndPreviewSlidebox/SendTestMessage.js

@@ -19,7 +19,6 @@ const SendTestMessage = ({
   formData,
   isSendingTestMessage,
   formatMessage,
-  isContentValid = true,
 }) => (
   <CapStepsAccordian
     showNumberSteps={false}
@@ -44,11 +43,7 @@ const SendTestMessage = ({
               multiple
               placeholder={formatMessage(messages.testCustomersPlaceholder)}
             />
-            <CapButton
-              onClick={handleSendTestMessage}
-              disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage || !isContentValid}
-              title={!isContentValid ? formatMessage(messages.contentInvalid) : ''}
-            >
+            <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || (isEmpty(formData['template-subject']) && isEmpty(formData[0]?.['template-subject'])) || isSendingTestMessage}>
               <FormattedMessage {...messages.sendTestButton} />
             </CapButton>
           </CapRow>),
@@ -68,7 +63,6 @@ SendTestMessage.propTypes = {
   formData: PropTypes.object.isRequired,
   isSendingTestMessage: PropTypes.bool.isRequired,
   formatMessage: PropTypes.func.isRequired,
-  isContentValid: PropTypes.bool,
 };
 
 export default SendTestMessage;

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -52,7 +52,6 @@ import {
   INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
 } from './constants';
 import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
-import { validateIfTagClosed } from '../../utils/tagValidations';
 
 const TestAndPreviewSlidebox = (props) => {
   const {
@@ -104,147 +103,10 @@ const TestAndPreviewSlidebox = (props) => {
   const [selectedTestEntities, setSelectedTestEntities] = useState([]);
   const [beeContent, setBeeContent] = useState(''); // Track BEE editor content separately
   const previousBeeContentRef = useRef(''); // Track previous BEE content to prevent unnecessary updates
-  const [isContentValid, setIsContentValid] = useState(true); // Track if content tags are valid
 
   const isUpdatePreviewDisabled = useMemo(() => (
-    requiredTags.some((tag) => !customValues[tag.fullPath]) || !isContentValid
-  ), [requiredTags, customValues, isContentValid]);
-
-  // Function to validate tags in content
-  const validateContentTags = (content) => {
-    if (!content) return true;
-    
-    try {
-      // Convert HTML to text (same as what's used for tag extraction)
-      // This ensures we validate the same content that will be used for tag extraction
-      const textContent = convert(content, GLOBAL_CONVERT_OPTIONS);
-      
-      // Check if there are any braces in the content
-      const hasBraces = textContent.includes('{') || textContent.includes('}');
-      
-      // If no braces exist, content is valid (no tag validation needed)
-      if (!hasBraces) {
-        return true;
-      }
-      
-      // First check if tags are properly closed using the utility function
-      // This validates that all opening braces have corresponding closing braces
-      if (!validateIfTagClosed(textContent)) {
-        return false;
-      }
-      
-      // Now validate tag format: tags must be in format {{tag_name}}
-      // Find all valid tag patterns {{tag_name}}
-      const tagPattern = /{{[^}]*}}/g;
-      const matches = textContent.match(tagPattern) || [];
-      
-      // Remove all valid {{tag}} patterns from content to check for invalid braces
-      let contentWithoutValidTags = textContent;
-      matches.forEach((match) => {
-        contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
-      });
-      
-      // Check if there are any remaining braces (single braces or unclosed braces)
-      // These would be invalid patterns like {tag}, {first, first}, etc.
-      if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
-        return false;
-      }
-      
-      // Check each tag for valid format
-      for (const match of matches) {
-        // Valid tag format: {{tag_name}} - must start with {{ and end with }}
-        if (!match.startsWith('{{') || !match.endsWith('}}')) {
-          return false;
-        }
-        
-        // Extract tag name (content between {{ and }})
-        const tagName = match.slice(2, -2).trim();
-        
-        // Tag name should not be empty
-        if (!tagName) {
-          return false;
-        }
-        
-        // Check for invalid patterns in tag name
-        // Invalid patterns: "first or first", "first and first", etc.
-        const invalidPatterns = [
-          /\s+or\s+/i,  // " or " as separate word (e.g., "first or first")
-          /\s+and\s+/i, // " and " as separate word
-        ];
-        
-        for (const pattern of invalidPatterns) {
-          if (pattern.test(tagName)) {
-            return false;
-          }
-        }
-        
-        // Check for unclosed single braces in tag name (e.g., {{first{name}})
-        const singleOpenBraces = (tagName.match(/{/g) || []).length;
-        const singleCloseBraces = (tagName.match(/}/g) || []).length;
-        if (singleOpenBraces !== singleCloseBraces) {
-          return false;
-        }
-      }
-      
-      return true;
-    } catch (error) {
-      // If conversion fails, fall back to validating the original content
-      console.warn('Error converting content for validation:', error);
-      const hasBraces = content.includes('{') || content.includes('}');
-      if (!hasBraces) {
-        return true;
-      }
-      
-      // Apply same validation to original content
-      if (!validateIfTagClosed(content)) {
-        return false;
-      }
-      
-      const tagPattern = /{{[^}]*}}/g;
-      const matches = content.match(tagPattern) || [];
-      
-      // Remove all valid {{tag}} patterns from content to check for invalid braces
-      let contentWithoutValidTags = content;
-      matches.forEach((match) => {
-        contentWithoutValidTags = contentWithoutValidTags.replace(match, '');
-      });
-      
-      // Check if there are any remaining braces (single braces or unclosed braces)
-      if (contentWithoutValidTags.includes('{') || contentWithoutValidTags.includes('}')) {
-        return false;
-      }
-      
-      for (const match of matches) {
-        if (!match.startsWith('{{') || !match.endsWith('}}')) {
-          return false;
-        }
-        
-        const tagName = match.slice(2, -2).trim();
-        if (!tagName) {
-          return false;
-        }
-        
-        const invalidPatterns = [
-          /\s+or\s+/i,
-          /\s+and\s+/i,
-        ];
-        
-        for (const pattern of invalidPatterns) {
-          if (pattern.test(tagName)) {
-            return false;
-          }
-        }
-        
-        const singleOpenBraces = (tagName.match(/{/g) || []).length;
-        const singleCloseBraces = (tagName.match(/}/g) || []).length;
-        if (singleOpenBraces !== singleCloseBraces) {
-          return false;
-        }
-      }
-      
-      return true;
-    }
-  };
+    requiredTags.some((tag) => !customValues[tag.fullPath])
+  ), [requiredTags, customValues]);
 
   // Function to resolve tags in text with custom values
   const resolveTagsInText = (text, tagValues) => {
@@ -291,10 +153,6 @@ const TestAndPreviewSlidebox = (props) => {
       if (existingContent && existingContent.trim() !== '') {
         // We already have content, update local state only if it's different
         if (existingContent !== previousBeeContentRef.current) {
-          // Validate content tags for BEE editor
-          const isValid = validateContentTags(existingContent);
-          setIsContentValid(isValid);
-          
           previousBeeContentRef.current = existingContent;
           setBeeContent(existingContent);
           setPreviewDataHtml({
@@ -328,10 +186,6 @@ const TestAndPreviewSlidebox = (props) => {
           }
 
           if (htmlFile) {
-            // Validate content tags
-            const isValid = validateContentTags(htmlFile);
-            setIsContentValid(isValid);
-
             // Update our states
             previousBeeContentRef.current = htmlFile;
             setBeeContent(htmlFile);
@@ -340,16 +194,9 @@ const TestAndPreviewSlidebox = (props) => {
               resolvedTitle: formData['template-subject'] || ''
             });
 
-            // Only extract tags if content is valid
-            if (isValid) {
-              const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
-              actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
-            } else {
-              // Show error notification for invalid content
-              CapNotification.error({
-                message: formatMessage(messages.contentInvalid),
-              });
-            }
+            // Always extract tags when content changes
+            const payloadContent = convert(htmlFile, GLOBAL_CONVERT_OPTIONS);
+            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
           }
 
           // Restore original handler
@@ -364,45 +211,23 @@ const TestAndPreviewSlidebox = (props) => {
         const templateContent = currentTabData?.[activeTab]?.['template-content'];
 
         if (templateContent) {
-          // Validate content tags
-          const isValid = validateContentTags(templateContent);
-          setIsContentValid(isValid);
-
           // Update preview with initial content
           setPreviewDataHtml({
             resolvedBody: templateContent,
             resolvedTitle: formData['template-subject'] || ''
           });
 
-          // Only extract tags if content is valid
-          if (isValid) {
-            const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
-            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
-          } else {
-            // Show error notification for invalid content
-            CapNotification.error({
-              message: formatMessage(messages.contentInvalid),
-            });
-          }
+          // Always extract tags when showing
+          const payloadContent = convert(templateContent, GLOBAL_CONVERT_OPTIONS);
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         } else {
           // Fallback to content prop if no template content
-          const contentToValidate = getCurrentContent;
-          const isValid = validateContentTags(contentToValidate);
-          setIsContentValid(isValid);
-
-          // Only extract tags if content is valid
-          if (isValid) {
-            const payloadContent = convert(
-              contentToValidate,
-              GLOBAL_CONVERT_OPTIONS
-            );
-            actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
-          } else {
-            // Show error notification for invalid content
-            CapNotification.error({
-              message: formatMessage(messages.contentInvalid),
-            });
-          }
+          const payloadContent = convert(
+            getCurrentContent,
+            GLOBAL_CONVERT_OPTIONS
+          );
+          // Always extract tags when showing
+          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
         }
       }
       
@@ -418,28 +243,17 @@ const TestAndPreviewSlidebox = (props) => {
     const isDragDrop = currentTabData?.[activeTab]?.is_drag_drop;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
     
-    if (templateContent && templateContent.trim() !== '' && show) {
-      // Common function to handle content update with validation
+    if (templateContent && templateContent.trim() !== '') {
+      // Common function to handle content update
       const handleContentUpdate = (content) => {
-        // Validate content tags for each update
-        const isValid = validateContentTags(content);
-        setIsContentValid(isValid);
-
         setPreviewDataHtml({
           resolvedBody: content,
           resolvedTitle: formData['template-subject'] || ''
         });
 
-        // Only extract tags if content is valid
-        if (isValid) {
-          const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
-          actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
-        } else {
-          // Show error notification for invalid content
-          CapNotification.error({
-            message: formatMessage(messages.contentInvalid),
-          });
-        }
+        // Extract tags from content
+        const payloadContent = convert(content, GLOBAL_CONVERT_OPTIONS);
+        actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
       };
 
       if (isDragDrop) {
@@ -473,7 +287,6 @@ const TestAndPreviewSlidebox = (props) => {
       setTagsExtracted(false);
       setPreviewDevice('desktop');
       setSelectedTestEntities([]);
-      setIsContentValid(true);
       actions.clearPrefilledValues();
     }
   }, [show]);
@@ -717,22 +530,6 @@ const TestAndPreviewSlidebox = (props) => {
 
   // Handle update preview
   const handleUpdatePreview = async () => {
-    // Re-validate content to get latest state (in case liquid errors were fixed)
-    const currentTabData = formData[currentTab - 1];
-    const activeTab = currentTabData?.activeTab;
-    const templateContent = currentTabData?.[activeTab]?.['template-content'];
-    const contentToValidate = templateContent || getCurrentContent;
-    const isValid = validateContentTags(contentToValidate);
-    setIsContentValid(isValid);
-
-    // Check if content is valid before updating preview
-    if (!isValid) {
-      CapNotification.error({
-        message: formatMessage(messages.contentInvalid),
-      });
-      return;
-    }
-
     try {
       // Include unsubscribe tag if content contains it
       const resolvedTags = { ...customValues };
@@ -762,20 +559,9 @@ const TestAndPreviewSlidebox = (props) => {
     const currentTabData = formData[currentTab - 1];
     const activeTab = currentTabData?.activeTab;
     const templateContent = currentTabData?.[activeTab]?.['template-content'];
-    const content = templateContent || getCurrentContent;
-
-    // Validate content tags before extracting
-    const isValid = validateContentTags(content);
-    setIsContentValid(isValid);
-
-    if (!isValid) {
-      CapNotification.error({
-        message: formatMessage(messages.contentInvalid),
-      });
-      return;
-    }
     
     // Check for personalization tags (excluding unsubscribe)
+    const content = templateContent || getCurrentContent;
     const tags = content.match(/{{[^}]+}}/g) || [];
     const hasPersonalizationTags = tags.some(tag => !tag.includes('unsubscribe'));
     
@@ -804,22 +590,6 @@ const TestAndPreviewSlidebox = (props) => {
   };
 
   const handleSendTestMessage = () => {
-    // Re-validate content to get latest state (in case liquid errors were fixed)
-    const currentTabData = formData[currentTab - 1];
-    const activeTab = currentTabData?.activeTab;
-    const templateContent = currentTabData?.[activeTab]?.['template-content'];
-    const contentToValidate = templateContent || getCurrentContent;
-    const isValid = validateContentTags(contentToValidate);
-    setIsContentValid(isValid);
-
-    // Check if content is valid before sending test message
-    if (!isValid) {
-      CapNotification.error({
-        message: formatMessage(messages.contentInvalid),
-      });
-      return;
-    }
-
     const allUserIds = [];
     selectedTestEntities.forEach((entityId) => {
       const group = testGroups.find((g) => g.groupId === entityId);
@@ -915,7 +685,6 @@ const TestAndPreviewSlidebox = (props) => {
       formData={formData}
       isSendingTestMessage={isSendingTestMessage}
       formatMessage={formatMessage}
-      isContentValid={isContentValid}
     />
   );
 

package/v2Components/TestAndPreviewSlidebox/messages.js

@@ -144,12 +144,4 @@ export default defineMessages({
     id: `${scope}.invalidJSON`,
     defaultMessage: 'Invalid JSON input',
   },
-  contentInvalid: {
-    id: `${scope}.contentInvalid`,
-    defaultMessage: 'Content is invalid. Please fix the tags in your content before testing or previewing.',
-  },
-  previewUpdateError: {
-    id: `${scope}.previewUpdateError`,
-    defaultMessage: 'Failed to update preview',
-  },
 });

package/v2Containers/Assets/Gallery/index.js

@@ -31,6 +31,7 @@ import injectReducer from '../../../utils/injectReducer';
 import { v2GallerySagas } from './sagas';
 import v2GalleryReducer from './reducer';
 import { GALLERY_ALLOWED_EXTENSION } from './constants';
+import CapPageSpinner from '../../../v2Components/CapPageSpinner';
 
 const {CapCustomCardList} = CapCustomCard;
 export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
@@ -323,7 +324,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
   deleteAsset(asset) {
     this.props.actions.deleteAssetById(asset._id, asset.type);
   }
-  getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip}) => {
+  getTemplateDataForGrid = ({templates, handlers, filterContent, isLoading, loadingTip, isInitialLoading}) => {
     const currentChannel = 'gallery';
     const { searchLoader, searchText } = this.state;
     const cardDataList = templates?.length ? _.map(templates, (template) => {
@@ -369,8 +370,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
     }) : [];
     return (<div>
       {filterContent}
-      <CapCustomSkeleton loader={isLoading}>
-        {!isLoading && <div>
+        {!(isInitialLoading && isLoading) && <div>
           {!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
             <CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
             {!_.isEmpty(searchText) && _.isEmpty(templates) && (
@@ -386,7 +386,8 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
           )}
         </div>
         }
-      </CapCustomSkeleton>
+        {<CapCustomSkeleton loader={isInitialLoading && isLoading} />}
+        {<CapPageSpinner spinning={!isInitialLoading && isLoading} />}
 
     </div>);
   }
@@ -506,7 +507,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
               onItemClick={this.handleOnHoverItem}
               enablePagination
             /> */}
-            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: assetList, filterContent, handlers: {selectAsset: this.selectAsset}})}
+            {this.getTemplateDataForGrid({isLoading, loadingTip, channel: this.state.channel, templates: assetList, filterContent, handlers: {selectAsset: this.selectAsset}, isInitialLoading: this.state.page === 1 && isLoading})}
 
           </Pagination>
           }

package/v2Containers/Templates/_templates.scss

@@ -11,7 +11,6 @@
   .creatives-templates-list.full-mode{
     .pagination-container {
       .cap-custom-card-list-row {
-        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(3n+3) { //every 4th child
             margin-right: unset;
@@ -26,7 +25,6 @@
   .creatives-templates-list.full-mode{
     .pagination-container {
       .cap-custom-card-list-row {
-        padding-bottom: 10rem;
         .cap-custom-card-list-col{
           &:nth-child(4n+4) { //every 4th child
             margin-right: unset;
@@ -58,9 +56,6 @@
   }
 
   .pagination-container {
-    .cap-custom-card-list-row {
-      padding-bottom: 10rem;
-    }
     .FACEBOOK {
       .ant-card-body {
         background-color: $CAP_G09;

package/v2Containers/Templates/index.js

@@ -155,6 +155,7 @@ import { makeSelectRcs } from '../Rcs/selectors';
 import { getRcsStatusType } from '../Rcs/utils';
 import { v2MobilePushSagas } from '../MobilePushNew/sagas';
 import { AUTO_CAROUSEL, BIG_PICTURE, FILMSTRIP_CAROUSEL, MANUAL_CAROUSEL } from '../MobilePushNew/constants';
+import CapPageSpinner from '../../v2Components/CapPageSpinner';
 const withMobilePushNewSaga = injectSaga({ key: 'mobilePushNew', saga: v2MobilePushSagas, mode: DAEMON });
 
 const { timeTracker } = GA;
@@ -1190,7 +1191,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     ) : <>{children}</>
   };
 
-  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, loadingTip, previewTemplateId }) => {
+  getTemplateDataForGrid = ({templates = [], handlers, filterContent, channel, isLoading, isInitialLoading,  loadingTip, previewTemplateId }) => {
     const currentChannel = channel.toUpperCase();
     const {channel: stateChannel} = this.state;
     const channelLowerCase = stateChannel.toLowerCase();
@@ -1749,11 +1750,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     
     const noLoaderAndSearchText = isEmpty(this.state.searchText) && !isLoading;
 
-    return (<div>
+return (<div>
       {[WECHAT, MOBILE_PUSH, INAPP, WHATSAPP, ZALO].includes(currentChannel) && this.showAccountName()}
       {filterContent}
       {[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
-      <CapCustomSkeleton loader={isLoading || getAllTemplatesInProgress}>
         {<div>
           {!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
             <div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
@@ -1825,9 +1825,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                 <ChannelTypeIllustration isFullMode={this.props.isFullMode} createTemplate={this.createTemplate} currentChannel={currentChannel}/>
               </div>
           }
+          {<CapCustomSkeleton loader={isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
+          {<CapPageSpinner spinning={!isInitialLoading && (isLoading || getAllTemplatesInProgress)} />}
         </div>
         }
-      </CapCustomSkeleton>
     </div>);
   }
   filterLineTemplates = (templates) => {
@@ -2900,6 +2901,15 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       (rcsLoader !== undefined ? rcsLoader : false);
     return isLoading;
   }
+
+  getInitialLoading = () => {
+    const isLoadingValue = this.isLoading();
+    const templates = this.props.TemplatesList || [];
+    const hasTemplates = !isEmpty(templates) || this.state.templatesCount > 0;
+    const isInitialLoading = isLoadingValue && this.state.page === 1 && !hasTemplates;
+    
+    return isInitialLoading;
+  }
  
   checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
   renderEmailPreviewModal() {
@@ -3244,6 +3254,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const pageHeader = "";
     const pageHeaderDvs = "";
     const isLoading = this.isLoading();
+    const isInitialLoading = this.getInitialLoading();
     let previewHeader = this.props.intl.formatMessage(messages.preview);
     // const previewHeader = (this.state.channel.toLowerCase() === 'email' ? <h3>{this.props.intl.formatMessage(messages.emailPreview)}</h3> : <h3>{this.props.intl.formatMessage(messages.ebillPreview)}</h3>);
     if (this.state.channel.toLowerCase() === 'email' || this.state.channel.toLowerCase() === 'ebill') {
@@ -3538,6 +3549,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {this.getTemplateDataForGrid({
                 previewTemplateId: this.state.zaloPreviewItemId,
                 isLoading,
+                isInitialLoading,
                 loadingTip,
                 channel: this.state.channel,
                 templates: this.state.searchingZaloTemplate