fix suspense

README.MD

@@ -166,6 +166,8 @@ The following ``JSON`` is a result of [this Google Spreadsheet](https://docs.goo
 ![ScreenShot](https://raw.githubusercontent.com/blopa/Resume-Builder/main/screenshots/v3/screenshot_3.png)
 
 ## Release Notes
+- **v3.0.4:**
+	- Fix React suspense on the resume viewer page.
 - **v3.0.3:**
 	- Add online resume viewer. Example: [https://resume-builder.js.org/view/default/blopa](https://resume-builder.js.org/view/default/blopa).
 - **v3.0.2:**

package.json

@@ -1,6 +1,6 @@
 {
     "name": "resume-builder",
-    "version": "3.0.3",
+    "version": "3.0.4",
     "description": "Resume Builder",
     "main": "index.js",
     "author": "Pablo Pirata",

src/pages/ResumeViewer.jsx

@@ -9,7 +9,7 @@ import { fetchGithubResumeJson, isValidJsonString } from '../utils/gatsby-fronte
 import A4Container from '../components/A4Container';
 import { StoreContext } from '../store/StoreProvider';
 import setJsonResume from '../store/actions/setJsonResume';
-import { traverseObject } from '../utils/utils';
+import { isObjectNotEmpty, traverseObject } from '../utils/utils';
 import setTogglableJsonResume from '../store/actions/setTogglableJsonResume';
 
 const importTemplate = (template) => lazy(() =>
@@ -18,14 +18,15 @@ const importTemplate = (template) => lazy(() =>
 
 const ResumeViewer = ({ params, uri }) => {
     const intl = useIntl();
-    const [resumeTemplate, setResumeTemplate] = useState([]);
+    const [resumeTemplate, setResumeTemplate] = useState(['Default']);
     const { state, dispatch } = useContext(StoreContext);
 
     const username = params['*']; // TODO
     const template = uri.split('/').pop(); // TODO
     const validTemplate = TEMPLATES_LIST.find(
         (templateName) => templateName.toLowerCase() === template.toLowerCase()
     );
+    const hasData = isObjectNotEmpty(state?.togglableJsonResume) && isObjectNotEmpty(state?.jsonResume);
 
     useEffect(() => {
         const fetchResumeJsonAndLoadTemplate = async () => {
@@ -35,10 +36,17 @@ const ResumeViewer = ({ params, uri }) => {
             }
 
             const jsonResume = JSON.parse(jsonString);
-            dispatch(setJsonResume(jsonResume));
+            if (!isObjectNotEmpty(jsonResume)) {
+                navigate('/');
+            }
+
             const togglableJsonResume = traverseObject(cloneDeep(jsonResume));
-            dispatch(setTogglableJsonResume(togglableJsonResume));
+            if (!isObjectNotEmpty(togglableJsonResume)) {
+                navigate('/');
+            }
 
+            dispatch(setJsonResume(jsonResume));
+            dispatch(setTogglableJsonResume(togglableJsonResume));
             const Template = await importTemplate(validTemplate);
             // console.log({validTemplate, jsonResume});
             setResumeTemplate([
@@ -65,11 +73,14 @@ const ResumeViewer = ({ params, uri }) => {
             <A4Container
                 alignCenter
             >
-                <Suspense
-                    fallback="Loading..."
-                >
-                    {resumeTemplate}
-                </Suspense>
+                {hasData && (
+                    <Suspense
+                        fallback={intl.formatMessage({ id: 'loading' })}
+                    >
+                        {resumeTemplate}
+                    </Suspense>
+                )}
+                {!hasData && intl.formatMessage({ id: 'loading' })}
             </A4Container>
         </div>
     );