chore: Update page loading fallback components

src/components/Common/PageAssistLoader.tsx

@@ -0,0 +1,10 @@
+
+export const PageAssistLoader = () => {
+  return (
+    <div className="fixed bg-[#171717] top-0 left-0 right-0 bottom-0 w-full h-screen z-50 overflow-hidden opacity-75 flex flex-col items-center justify-center">
+      <p className="text-center text-white text-lg mt-4">
+        Loading...
+      </p>
+    </div>
+  )
+}

src/routes/index.tsx

@@ -4,6 +4,7 @@ import { useDarkMode } from "~/hooks/useDarkmode"
 import { Skeleton } from "antd"
 import { OptionRoutingChrome, SidepanelRoutingChrome } from "./chrome"
 import { OptionRoutingFirefox, SidepanelRoutingFirefox } from "./firefox"
+import { PageAssistLoader } from "@/components/Common/PageAssistLoader"
 
 export const OptionRouting = () => {
   const { mode } = useDarkMode()
@@ -14,7 +15,7 @@ export const OptionRouting = () => {
       className={`${mode === "dark" ? "dark" : "light"} ${
         i18n.language === "ru" ? "onest" : "inter"
       }`}>
-      <Suspense fallback={<Skeleton />}>
+      <Suspense fallback={<PageAssistLoader />}>
           {import.meta.env.BROWSER === "chrome" ? (
             <OptionRoutingChrome />
           ) : (
@@ -34,7 +35,7 @@ export const SidepanelRouting = () => {
       className={`${mode === "dark" ? "dark" : "light"} ${
         i18n.language === "ru" ? "onest" : "inter"
       }`}>
-      <Suspense fallback={<Skeleton />}>
+      <Suspense fallback={<PageAssistLoader />}>
           {import.meta.env.BROWSER === "chrome" ? (
             <SidepanelRoutingChrome />
           ) : (

tailwind.config.js

@@ -3,5 +3,5 @@ module.exports = {
   mode: "jit",
   darkMode: "class",
   content: ["./src/**/*.tsx"],
-  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography")]
+  plugins: [require("@tailwindcss/forms"), require("@tailwindcss/typography"),]
 }