Improve app loading process

.cqfd/docker/Dockerfile

@@ -15,5 +15,8 @@ COPY requirements/dev.txt /tmp/dev.txt
 
 RUN mkdir -p /cache/vulnscout && chmod -R 777 /cache
 
+RUN mkdir -p /scan
+RUN chmod -R 777 /scan
+
 RUN pip install --no-cache-dir -r /tmp/dev.txt \
     && rm -rf /tmp/dev.txt

Dockerfile

@@ -19,7 +19,7 @@ FROM alpine:3.20
 RUN mkdir -p /scan/inputs /scan/tmp /scan/outputs /cache/vulnscout
 WORKDIR /scan
 
-RUN apk add --no-cache bash curl git zstd icu python3 py3-pip asciidoctor ruby && \
+RUN apk add --no-cache bash curl git zstd icu python3 py3-pip asciidoctor ruby jq && \
     gem install asciidoctor-pdf --version 2.3.15
 
 # Install OSV Scanner

frontend/src/App.tsx

@@ -14,6 +14,7 @@ function App() {
     topline: 'Project analysis is running...',
     details: 'Step 0 : starting script'
   });
+  const [loadingBarValue, setLoadingBarValue] = useState<number | undefined>(undefined);
   const [darkMode, setDarkMode] = useState(true);
 
   useEffect(() => {
@@ -33,17 +34,18 @@ function App() {
           topline: 'Project analysis is running...',
           details: `Step ${data?.step ?? '0'}/${data?.maxsteps ?? '?'} : ${data?.message}`
         });
+        setLoadingBarValue(data?.loadingbar);
       })
       .catch(error => {
         console.error('Error:', error);
         setLoadingText({
           topline: 'Error fetching scan status',
           details: String(error)
         });
+        setLoadingBarValue(0);
       });
     }, 1000);
 
-    // Clean up the interval on unmount
     return () => clearInterval(interval);
   }, [loading]);
 
@@ -54,6 +56,7 @@ function App() {
           <Loading
             topline={loadingText.topline}
             details={loadingText.details}
+            progress={loadingBarValue}
           />
         ) : (
           <Explorer

frontend/src/pages/Loading.tsx

@@ -3,19 +3,33 @@ import infinityLoader from '/infinity_loader.svg';
 type Props = {
   topline?: string;
   details?: string;
+  progress?: number;
 }
 
 function Loading(
   {
     topline = 'Project analysis is running...',
-    details = 'Step 0 : starting script'
+    details = 'Step 0 : starting script',
+    progress
   }: Readonly<Props>
 ) {
   return (
     <div className='w-screen min-h-screen bg-gray-200 dark:bg-neutral-800 dark:text-[#eee] text-center pt-[15vh]'>
-        <img src={infinityLoader} alt='Loading animation' className='min-w-[150px] m-auto' />
-        <h1 id='topline' className='text-5xl p-8'>{topline}</h1>
-        <h2 id='details' className='text-3xl p-8'>{details}</h2>
+      <img src={infinityLoader} alt='Loading animation' className='min-w-[150px] m-auto' />
+      <h1 id='topline' className='text-5xl p-8'>{topline}</h1>
+      <h2 id='details' className='text-3xl p-4'>{details}</h2>
+
+      {progress !== null && (
+        <>
+          <div className='w-1/2 mx-auto bg-gray-300 dark:bg-neutral-700 h-4 rounded-full overflow-hidden'>
+            <div
+              className='bg-green-500 h-4 transition-all duration-500 ease-out'
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <p className='text-xl mt-2'>{progress}%</p>
+        </>
+      )}
     </div>
   )
 }

requirements/base.txt

@@ -5,3 +5,4 @@ pyparsing==3.1.2
 semver==3.0.2
 spdx-tools==0.8.3
 uuid7==0.1.0
+orjson==3.11.2

requirements/dev.txt

@@ -11,3 +11,4 @@ pytest==8.2.0
 semver==3.0.2
 spdx-tools==0.8.3
 uuid7==0.1.0
+orjson==3.11.2