refactor: Only show the version indicator once all data is loaded

* refactor(modules): ExternalApiService module import in app.service.ts to relative link

* refactor: Small improvements after merge of version indicator feature

* refactor: Only show the version indicator once all data is loaded

ui/src/components/VersionStatus/index.tsx

@@ -26,16 +26,18 @@ interface VersionStatusProps {
 }
 
 const VersionStatus = ({ onClick }: VersionStatusProps) => {
-  const [version, setVersion] = useState<string>('1.7.1')
+  const [version, setVersion] = useState<string>('0.0.1')
   const [commitTag, setCommitTag] = useState<string>('')
   const [updateAvailable, setUpdateAvailable] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(true)
 
   useEffect(() => {
     GetApiHandler('/app/status').then((resp: VersionResponse) => {
       if (resp.status) {
         setVersion(resp.version)
         setCommitTag(resp.commitTag)
         setUpdateAvailable(resp.updateAvailable)
+        setLoading(false)
       }
     })
   }, [])
@@ -48,46 +50,50 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => {
         : messages.STABLE
 
   return (
-    <Link
-      href="https://github.com/jorenn92/Maintainerr/releases"
-      target="_blank"
-      onClick={onClick}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' && onClick) {
-          onClick()
-        }
-      }}
-      role="button"
-      tabIndex={0}
-      className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-zinc-700 transition duration-300 ${
-        updateAvailable
-          ? 'bg-amber-800 text-white hover:bg-amber-600'
-          : 'bg-zinc-900 text-zinc-300 hover:bg-zinc-800'
-      }`}
-    >
-      {commitTag === 'local' ? (
-        <CodeIcon className="h-6 w-6" />
-      ) : version.startsWith('develop-') ? (
-        <BeakerIcon className="h-6 w-6" />
-      ) : (
-        <ServerIcon className="h-6 w-6" />
-      )}
-      <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
-        <span className="font-bold">{versionStream}</span>
-        <span className="truncate">
+    <>
+      {!loading ? (
+        <Link
+          href="https://github.com/jorenn92/Maintainerr/releases"
+          target="_blank"
+          onClick={onClick}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && onClick) {
+              onClick()
+            }
+          }}
+          role="button"
+          tabIndex={0}
+          className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-zinc-700 transition duration-300 ${
+            updateAvailable
+              ? 'bg-amber-800 text-white hover:bg-amber-600'
+              : 'bg-zinc-900 text-zinc-300 hover:bg-zinc-800'
+          }`}
+        >
           {commitTag === 'local' ? (
-            ''
-          ) : updateAvailable ? (
-            messages.OUT_OF_DATE
+            <CodeIcon className="h-6 w-6" />
+          ) : version.startsWith('develop-') ? (
+            <BeakerIcon className="h-6 w-6" />
           ) : (
-            <code className="bg-transparent p-0">
-              {version.replace('develop-', '')}
-            </code>
+            <ServerIcon className="h-6 w-6" />
           )}
-        </span>
-      </div>
-      {updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
-    </Link>
+          <div className="flex min-w-0 flex-1 flex-col truncate px-2 last:pr-0">
+            <span className="font-bold">{versionStream}</span>
+            <span className="truncate">
+              {commitTag === 'local' ? (
+                ''
+              ) : updateAvailable ? (
+                messages.OUT_OF_DATE
+              ) : (
+                <code className="bg-transparent p-0">
+                  {version.replace('develop-', '')}
+                </code>
+              )}
+            </span>
+          </div>
+          {updateAvailable && <ArrowCircleUpIcon className="h-6 w-6" />}
+        </Link>
+      ) : undefined}
+    </>
   )
 }