fix: remove skeleton when app load but in 404

Signed-off-by: Innei <i@innei.in>

apps/renderer/src/App.tsx

@@ -9,6 +9,7 @@ import { useAppIsReady } from "./atoms/app"
 import { useUISettingKey } from "./atoms/settings/ui"
 import { navigateEntry } from "./hooks/biz/useNavigateEntry"
 import { applyAfterReadyCallbacks } from "./initialize/queue"
+import { removeAppSkeleton } from "./lib/app"
 import { appLog } from "./lib/log"
 import { Titlebar } from "./modules/app/Titlebar"
 import { RootProviders } from "./providers/root-providers"
@@ -53,7 +54,7 @@ const AppLayer = () => {
   const appIsReady = useAppIsReady()
 
   useEffect(() => {
-    document.querySelector("#app-skeleton")?.remove()
+    removeAppSkeleton()
 
     const doneTime = Math.trunc(performance.now())
     window.analytics?.capture("ui_render_init", {

apps/renderer/src/components/common/ErrorElement.tsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from "react"
 import { isRouteErrorResponse, useNavigate, useRouteError } from "react-router-dom"
 import { toast } from "sonner"
 
+import { removeAppSkeleton } from "~/lib/app"
 import { attachOpenInEditor } from "~/lib/dev"
 import { getNewIssueUrl } from "~/lib/issues"
 import { clearLocalPersistStoreData } from "~/store/utils/clear"
@@ -21,7 +22,7 @@ export function ErrorElement() {
   const stack = error instanceof Error ? error.stack : null
 
   useEffect(() => {
-    document.querySelector("#app-skeleton")?.remove()
+    removeAppSkeleton()
   }, [])
 
   useEffect(() => {

apps/renderer/src/components/common/NotFound.tsx

@@ -6,6 +6,7 @@ import type { Location } from "react-router-dom"
 import { useLocation, useNavigate } from "react-router-dom"
 
 import { isElectronBuild } from "~/constants"
+import { removeAppSkeleton } from "~/lib/app"
 
 import { PoweredByFooter } from "./PoweredByFooter"
 
@@ -37,6 +38,10 @@ export const NotFound = () => {
       ),
     )
   }, [location])
+
+  useEffect(() => {
+    removeAppSkeleton()
+  }, [])
   const navigate = useNavigate()
   return (
     <div className="prose center m-auto size-full flex-col dark:prose-invert">

apps/renderer/src/lib/app.ts

@@ -0,0 +1,3 @@
+export const removeAppSkeleton = () => {
+  document.querySelector("#app-skeleton")?.remove()
+}