Merge pull request #9919 from CitizenLabDotCo/master

Release 2024-12-31_2
CitizenLabDotCo · Dec 31, 2024 · af625ad · af625ad
2 parents 0449e4e + abdebea
commit af625ad
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 26 deletions.
diff --git a/front/app/components/admin/PostManager/InputManager.tsx b/front/app/components/admin/PostManager/InputManager.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, lazy, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -13,6 +13,7 @@ import { getTopicIds } from 'api/project_allowed_input_topics/util/getProjectTop
 import { IProjectData } from 'api/projects/types';
 import useTopics from 'api/topics/useTopics';
 
+import PostPreview from 'components/admin/PostManager/components/PostPreview';
 import Outlet from 'components/Outlet';
 import SearchInput from 'components/UI/SearchInput';
 
@@ -37,10 +38,6 @@ import {
   TopActionBar,
 } from '.';
 
-const LazyPostPreview = lazy(
-  () => import('components/admin/PostManager/components/PostPreview')
-);
-
 interface Props {
   // When the PostManager is used in /admin/projects, we pass down the current project id as a prop
   projectId?: string | null;
@@ -357,16 +354,14 @@ const InputManager = ({
           />
         </MiddleColumn>
       </ThreeColumns>
-      <Suspense fallback={null}>
-        <LazyPostPreview
-          type={type}
-          postId={previewPostId}
-          selectedPhaseId={selectedPhaseId}
-          mode={previewMode}
-          onClose={closePreview}
-          onSwitchPreviewMode={switchPreviewMode}
-        />
-      </Suspense>
+      <PostPreview
+        type={type}
+        postId={previewPostId}
+        selectedPhaseId={selectedPhaseId}
+        mode={previewMode}
+        onClose={closePreview}
+        onSwitchPreviewMode={switchPreviewMode}
+      />
     </>
   );
 };

diff --git a/front/app/components/admin/PostManager/components/PostPreview/Idea/IdeaPostPreview.tsx b/front/app/components/admin/PostManager/components/PostPreview/Idea/IdeaPostPreview.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 
 import { PreviewMode } from 'components/admin/PostManager';
-import AdminIdeaContent from 'components/admin/PostManager/components/PostPreview/Idea/AdminIdeaContent';
-import AdminIdeaEdit from 'components/admin/PostManager/components/PostPreview/Idea/AdminIdeaEdit';
+
+import AdminIdeaContent from './AdminIdeaContent';
+import AdminIdeaEdit from './AdminIdeaEdit';
 
 export interface Props {
   onClose: () => void;

diff --git a/front/app/components/admin/PostManager/components/PostPreview/index.tsx b/front/app/components/admin/PostManager/components/PostPreview/index.tsx
@@ -1,13 +1,14 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, lazy, Suspense } from 'react';
 
 import { colors } from '@citizenlab/cl2-component-library';
 import styled from 'styled-components';
 
+import FullPageSpinner from 'components/UI/FullPageSpinner';
 import SideModal from 'components/UI/SideModal';
 
 import { ManagerType, PreviewMode } from '../..';
 
-import IdeaPostPreview from './Idea/IdeaPostPreview';
+const IdeaPostPreview = lazy(() => import('./Idea/IdeaPostPreview'));
 
 export const Container = styled.div`
   min-height: 100%;
@@ -75,13 +76,15 @@ const PostPreview = ({
 
   return (
     <SideModal opened={opened} close={handleOnClose}>
-      <IdeaPostPreview
-        onClose={handleOnClose}
-        ideaId={postId}
-        onSwitchPreviewMode={onSwitchPreviewMode}
-        mode={mode}
-        selectedPhaseId={selectedPhaseId}
-      />
+      <Suspense fallback={<FullPageSpinner />}>
+        <IdeaPostPreview
+          onClose={handleOnClose}
+          ideaId={postId}
+          onSwitchPreviewMode={onSwitchPreviewMode}
+          mode={mode}
+          selectedPhaseId={selectedPhaseId}
+        />
+      </Suspense>
     </SideModal>
   );
 };