feat: Add loading on export page

brick-a-brack · Oct 10, 2024 · 9ef77d5 · 9ef77d5
1 parent d5d94cf
commit 9ef77d5
Showing 1 changed file with 11 additions and 5 deletions.
diff --git a/src/renderer/views/Export.jsx b/src/renderer/views/Export.jsx
@@ -17,6 +17,7 @@ import { parseRatio } from '../core/ratio';
 import useAppCapabilities from '../hooks/useAppCapabilities';
 import useProject from '../hooks/useProject';
 import useSettings from '../hooks/useSettings';
+import LoadingPage from '../components/LoadingPage';
 
 const generateCustomUuid = (length) => {
   const array = new Uint32Array(length);
@@ -123,16 +124,20 @@ const Export = ({ t }) => {
     })();
   }, [appCapabilities]);
 
-  if (!project || !settings) {
-    return null;
-  }
-
-  const progress = watch('mode') === 'frames' ? Math.min(frameRenderingProgress, 1) : Math.min(frameRenderingProgress / 2, 0.5) + Math.min(videoRenderingProgress / 2, 0.5);
 
   const handleBack = async () => {
     navigate(searchParams.get('back') || '/');
   };
 
+  if (!project || !settings || !bestResolution) {
+    return <>
+      <ActionsBar actions={['BACK']} onAction={handleBack} />
+      <LoadingPage show={true} />
+    </>;
+  }
+
+  const progress = watch('mode') === 'frames' ? Math.min(frameRenderingProgress, 1) : Math.min(frameRenderingProgress / 2, 0.5) + Math.min(videoRenderingProgress / 2, 0.5);
+
   const handleExport = async (data) => {
     const files = project.scenes[Number(track)].pictures;
 
@@ -227,6 +232,7 @@ const Export = ({ t }) => {
   return (
     <>
       <ActionsBar actions={['BACK']} onAction={handleBack} />
+      <LoadingPage show={!settings} />
       {settings && (
         <form id="export">
           <FormLayout title={t('Export')}>