From acf372b148d9ba581e11d28f79f8e8d24c68b2b7 Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Tue, 29 Sep 2020 15:56:18 +0200
Subject: [PATCH] Add loading when selecting form template

[MAILPOET-2988]
---
 assets/js/src/form_editor/templates/selection.tsx      | 7 +++++++
 assets/js/src/form_editor/templates/store/actions.ts   | 1 +
 assets/js/src/form_editor/templates/store/reducer.ts   | 8 ++++++++
 assets/js/src/form_editor/templates/store/selectors.ts | 3 +++
 assets/js/src/form_editor/templates/store/store.ts     | 1 +
 5 files changed, 20 insertions(+)

diff --git a/assets/js/src/form_editor/templates/selection.tsx b/assets/js/src/form_editor/templates/selection.tsx
index 44af9cd187..13e6acd2c6 100644
--- a/assets/js/src/form_editor/templates/selection.tsx
+++ b/assets/js/src/form_editor/templates/selection.tsx
@@ -3,6 +3,7 @@ import MailPoet from 'mailpoet';
 import { useSelect, useDispatch } from '@wordpress/data';
 import Categories from 'common/categories/categories';
 import Background from 'common/background/background';
+import Loading from 'common/loading';
 import Heading from 'common/typography/heading/heading';
 import { TemplateData } from './store/types';
 import TemplateBox from './components/template_box';
@@ -38,6 +39,11 @@ export default () => {
     []
   );
 
+  const loading: boolean = useSelect(
+    (select) => select('mailpoet-form-editor-templates').getLoading(),
+    []
+  );
+
   // const selectTemplateFailed: boolean = useSelect(
   //   (select) => select('mailpoet-form-editor-templates').getSelectTemplateFailed(),
   //   []
@@ -71,6 +77,7 @@ export default () => {
           ))}
         </div>
       </div>
+      {loading && <Loading />}
     </>
   );
 };
diff --git a/assets/js/src/form_editor/templates/store/actions.ts b/assets/js/src/form_editor/templates/store/actions.ts
index 4e69e3cfa1..478e578bd4 100644
--- a/assets/js/src/form_editor/templates/store/actions.ts
+++ b/assets/js/src/form_editor/templates/store/actions.ts
@@ -2,6 +2,7 @@ import { select } from '@wordpress/data';
 
 // eslint-disable-next-line import/prefer-default-export
 export function* selectTemplate(templateId) {
+  yield { type: 'SELECT_TEMPLATE_START' };
   const { res, success, error } = yield {
     type: 'CALL_API',
     endpoint: 'forms',
diff --git a/assets/js/src/form_editor/templates/store/reducer.ts b/assets/js/src/form_editor/templates/store/reducer.ts
index 88bc39491d..fa2acf8443 100644
--- a/assets/js/src/form_editor/templates/store/reducer.ts
+++ b/assets/js/src/form_editor/templates/store/reducer.ts
@@ -1,11 +1,19 @@
 export const selectTemplateFailed = (state) => ({
   ...state,
   selectTemplateFailed: true,
+  loading: false,
+});
+
+export const selectTemplateStarted = (state) => ({
+  ...state,
+  selectTemplateFailed: false,
+  loading: true,
 });
 
 export default (defaultState: object) => (state = defaultState, action) => {
   switch (action.type) {
     case 'SELECT_TEMPLATE_ERROR': return selectTemplateFailed(state);
+    case 'SELECT_TEMPLATE_START': return selectTemplateStarted(state);
     default:
       return state;
   }
diff --git a/assets/js/src/form_editor/templates/store/selectors.ts b/assets/js/src/form_editor/templates/store/selectors.ts
index 04846f96dd..162108badb 100644
--- a/assets/js/src/form_editor/templates/store/selectors.ts
+++ b/assets/js/src/form_editor/templates/store/selectors.ts
@@ -10,4 +10,7 @@ export default {
   getSelectTemplateFailed(state): boolean {
     return state.selectTemplateFailed;
   },
+  getLoading(state): boolean {
+    return state.loading;
+  },
 };
diff --git a/assets/js/src/form_editor/templates/store/store.ts b/assets/js/src/form_editor/templates/store/store.ts
index 6aa2cdec8f..43f57cbe1c 100644
--- a/assets/js/src/form_editor/templates/store/store.ts
+++ b/assets/js/src/form_editor/templates/store/store.ts
@@ -13,6 +13,7 @@ export default () => {
     templates: (window as any).mailpoet_templates,
     formEditorUrl: (window as any).mailpoet_form_edit_url,
     selectTemplateFailed: false,
+    loading: false,
   };
 
   const config = {