Add loading when selecting form template

[MAILPOET-2988]

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 />}
     </>
   );
 };

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',

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;
   }

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;
+  },
 };

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 = {