fix: clearer app loading prompt (#3275)

web/containers/WaitingCortexModal/index.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { Modal } from '@janhq/joi'
 import { useAtom, useAtomValue } from 'jotai'
@@ -13,6 +13,7 @@ import { hostAtom } from '@/helpers/atoms/AppConfig.atom'
 const WaitingForCortexModal: React.FC = () => {
   const host = useAtomValue(hostAtom)
   const [waitingForCortex, setWaitingForCortex] = useAtom(waitingForCortexAtom)
+  const [timedOut, setTimedOut] = useState(false)
   const { isSystemAlive } = useCortex()
 
   const checkSystemAlive = useCallback(async () => {
@@ -24,17 +25,38 @@ const WaitingForCortexModal: React.FC = () => {
     checkSystemAlive()
   }, [checkSystemAlive])
 
+  useEffect(() => {
+    setTimeout(() => {
+      if (waitingForCortex) setTimedOut(true)
+    }, 5000)
+  }, [waitingForCortex])
+
   return (
     <Modal
       hideClose
       open={waitingForCortex}
-      title={'Waiting for cortex'}
+      title={'Loading dependencies'}
       content={
         <div className="flex gap-x-2">
           <p className="mt-[2px] text-[hsla(var(--text-secondary))]">
-            Please ensure that cortex is up and running at {host}
+            Running API Server at{' '}
+            <a
+              href={`${host}/api`}
+              target="_blank"
+              className="text-[hsla(var(--app-link))] hover:underline"
+            >
+              {host}/api
+            </a>
+            , please wait for a moment...
+            <br /> <br />
+            {timedOut && (
+              <span>
+                The API server is taking longer than usual to start. If this
+                process continues to run for a minute, please check the log file
+                under the Jan Data Folder path or restart the application.
+              </span>
+            )}
           </p>
-
           <Spinner />
         </div>
       }