Improves app UI performance, better UX

src/components/DataDisplay/ChatMessage/ChatMessage.tsx

@@ -56,4 +56,4 @@ export const ChatMessage = ({ user, msg, sender }: ChatMessageProps) => {
       </Stack>
     </Group>
   );
-};
+};

src/components/DataDisplay/ItemName/ItemName.tsx

@@ -3,8 +3,7 @@ import { ItemWithMeta } from "$types";
 import { TextTranslate } from "../../Shared/TextTranslate";
 import { useTranslateCommon } from "@hooks/useTranslate.hook";
 import { DisplaySettings, GetItemDisplay, GetSubTypeDisplay } from "@utils/helper";
-import { useQuery } from "@tanstack/react-query";
-import api from "@api/index";
+import { useCacheContext } from "@contexts/cache.context";
 import { memo } from "react";
 import { faAmberStar, faCyanStar } from "@icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -27,15 +26,8 @@ export type ItemNameProps = {
 
 export const ItemName = memo(function ItemName({ color, size, hideQuantity, value, displaySettings }: ItemNameProps) {
   const theme = useMantineTheme();
-  // Fetch data from rust side
-  const { data: tradableItems } = useQuery({
-    queryKey: ["cache_items"],
-    queryFn: () => api.cache.getTradableItems(),
-  });
-  const { data: weapons } = useQuery({
-    queryKey: ["cache_riven_weapons"],
-    queryFn: () => api.cache.getRivenWeapons(),
-  });
+  // Fetch data from cache context
+  const { tradableItems, weapons } = useCacheContext();
   const GetQuantity = (): string | number => {
     if (!value) return "";
     let quantity = 0;

src/components/DataDisplay/RivenPreview/RivenPreview.tsx

@@ -1,14 +1,15 @@
+import { memo, useEffect, useState } from "react";
 import { Box, Collapse, PaperProps, Text } from "@mantine/core";
 import classes from "./RivenPreview.module.css";
 import { RivenAttribute, WFMarketTypes } from "$types/index";
 import { TauriTypes } from "$types";
-import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import api from "@api/index";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
 import { useHover } from "@mantine/hooks";
 import { getPolarityIcon } from "@icons";
+import { useCacheContext } from "@contexts/cache.context";
 
 export type RivenPreviewProps = {
   riven: WFMarketTypes.Auction | TauriTypes.StockRiven;
@@ -21,7 +22,7 @@ interface RivenAttributeWithUnits extends RivenAttribute {
   symbol: string;
 }
 
-export function RivenPreview({ paperProps, riven }: RivenPreviewProps) {
+export const RivenPreview = memo(function RivenPreview({ paperProps, riven }: RivenPreviewProps) {
   // State
   const { hovered, ref } = useHover();
   const [weapon, setWeapon] = useState<TauriTypes.CacheRivenWeapon | undefined>(undefined);
@@ -31,11 +32,8 @@ export function RivenPreview({ paperProps, riven }: RivenPreviewProps) {
   const [mastery, setMastery] = useState<number>(0);
   const [reRolls, setReRolls] = useState<number>(0);
   const [rank, setRank] = useState<number>(0);
-  // Fetch data from rust side
-  const { data: weapons } = useQuery<TauriTypes.CacheRivenWeapon[], Error>({
-    queryKey: ["cache_riven_weapons"],
-    queryFn: () => api.cache.getRivenWeapons(),
-  });
+  // Fetch data from cache context
+  const { weapons } = useCacheContext();
   const { data: allAttributes } = useQuery<TauriTypes.CacheRivenAttribute[], Error>({
     queryKey: ["cache_riven_attributes"],
     queryFn: () => api.cache.getRivenAttributes(),
@@ -150,4 +148,4 @@ export function RivenPreview({ paperProps, riven }: RivenPreviewProps) {
       </Collapse>
     </Box>
   );
-}
+});

src/components/DataDisplay/WFMOrder/WFMOrder.tsx

@@ -156,9 +156,8 @@ export function WFMOrder({ show_border, paperProps, order, footer, show_user, di
               className={classes.userName}
               truncate
               style={{
-                borderBottomColor: `var(--qf-user-status-${
-                  (order.user?.status.toString() || "offline") == "in_game" ? "ingame" : order.user?.status
-                })`,
+                borderBottomColor: `var(--qf-user-status-${(order.user?.status.toString() || "offline") == "in_game" ? "ingame" : order.user?.status
+                  })`,
                 borderBottom: "rem(3px) solid",
               }}
             >

src/components/Layouts/LogIn/LogInLayout.tsx

@@ -4,13 +4,14 @@ import { Outlet, useNavigate } from "react-router-dom";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBug, faEnvelope, faGlobe, faHome, faInfoCircle, faMessage } from "@fortawesome/free-solid-svg-icons";
 import { useTranslateComponent } from "@hooks/useTranslate.hook";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { NavbarLinkProps, NavbarMinimalColored } from "@components/Layouts/Shared/NavbarMinimalColored";
 import { Header } from "@components/Layouts/Shared/Header";
 import { useAuthContext } from "@contexts/auth.context";
 import { open } from "@tauri-apps/plugin-shell";
 import { AddMetric } from "@api/index";
 import { faWarframeMarket, facTradingAnalytics } from "@icons";
+import { prefetchRoute } from "../routeLoaders";
 
 export function LogInLayout() {
   // States
@@ -24,14 +25,24 @@ export function LogInLayout() {
     useTranslate(`navbar.${key}`, { ...context }, i18Key);
   // States
   const navigate = useNavigate();
-  const links = [
+  const handleNavigate = useCallback((link: NavbarLinkProps) => {
+    if (link.web) open(link.link, "_blank");
+    else navigate(link.link);
+
+    if (link.id == lastPage || !link.id) return;
+    setLastPage(link.id || "");
+    AddMetric("active_page", link.id);
+  }, [navigate, lastPage]);
+
+  const links = useMemo(() => [
     {
       align: "top",
       id: "home",
       link: "/",
       icon: <FontAwesomeIcon size={"lg"} icon={faHome} />,
       label: useTranslateNavBar("home"),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
+      onPrefetch: () => prefetchRoute("home"),
     },
     {
       align: "top",
@@ -40,6 +51,7 @@ export function LogInLayout() {
       icon: <FontAwesomeIcon size={"lg"} icon={faGlobe} />,
       label: useTranslateNavBar("live_scraper"),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
+      onPrefetch: () => prefetchRoute("liveScraper"),
     },
     {
       align: "top",
@@ -48,6 +60,7 @@ export function LogInLayout() {
       icon: <FontAwesomeIcon size={"xl"} icon={faWarframeMarket} />,
       label: useTranslateNavBar("warframe_market"),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
+      onPrefetch: () => prefetchRoute("warframeMarket"),
     },
     {
       align: "top",
@@ -66,6 +79,7 @@ export function LogInLayout() {
       ),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
       label: useTranslateNavBar("chat"),
+      onPrefetch: () => prefetchRoute("chat"),
     },
     {
       align: "top",
@@ -74,6 +88,7 @@ export function LogInLayout() {
       icon: <FontAwesomeIcon size={"lg"} icon={facTradingAnalytics} />,
       label: useTranslateNavBar("trading_analytics"),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
+      onPrefetch: () => prefetchRoute("tradingAnalytics"),
     },
     {
       align: "top",
@@ -82,6 +97,7 @@ export function LogInLayout() {
       icon: <FontAwesomeIcon size={"lg"} icon={faMessage} />,
       label: useTranslateNavBar("trade_messages"),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
+      onPrefetch: () => prefetchRoute("tradeMessages"),
     },
     {
       align: "top",
@@ -99,20 +115,14 @@ export function LogInLayout() {
       icon: <FontAwesomeIcon size={"lg"} icon={faInfoCircle} />,
       label: useTranslateNavBar("about"),
       onClick: (e: NavbarLinkProps) => handleNavigate(e),
+      onPrefetch: () => prefetchRoute("about"),
     },
-  ];
+  ], [user?.unread_messages, handleNavigate]);
+
   // Effects
   useEffect(() => {
     if (user?.qf_banned || user?.wfm_banned) navigate("/error/banned");
-  }, [user]);
-  const handleNavigate = (link: NavbarLinkProps) => {
-    if (link.web) open(link.link, "_blank");
-    else navigate(link.link);
-
-    if (link.id == lastPage || !link.id) return;
-    setLastPage(link.id || "");
-    AddMetric("active_page", link.id);
-  };
+  }, [user, navigate]);
   return (
     <AppShell
       classNames={classes}

src/components/Layouts/Routes.tsx

@@ -1,6 +1,8 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import { useAppContext } from "@contexts/app.context";
 import { useAuthContext } from "@contexts/auth.context";
+import { lazy } from "react";
+import { routeLoaders } from "./routeLoaders";
 
 // Layouts
 import { LogInLayout } from "./LogIn";
@@ -9,36 +11,38 @@ import { LogOutLayout } from "./LogOut";
 // Permissions Gate
 import AuthenticatedGate from "../AuthenticatedGate";
 
+// Lazy loaded pages for code splitting
+
 // Home Routes
-import PHome from "@pages/home";
+const PHome = lazy(routeLoaders.home);
 
 // Auth Routes
-import PLogin from "@pages/auth/login";
+const PLogin = lazy(routeLoaders.login);
 
 // Debug Routes
-import PDebug from "@pages/debug";
+const PDebug = lazy(routeLoaders.debug);
 
 // Error Routes
-import PError from "@pages/error";
+const PError = lazy(routeLoaders.error);
 
 // Banned Routes
-import PBanned from "@pages/banned";
+const PBanned = lazy(routeLoaders.banned);
 
 // Live Scraper
-import PLiveScraper from "@pages/live_scraper";
+const PLiveScraper = lazy(routeLoaders.liveScraper);
 
 // Trading Analytics
-import TradingAnalyticsPage from "@pages/trading_analytics";
+const TradingAnalyticsPage = lazy(routeLoaders.tradingAnalytics);
 
 // Warframe Market
-import PWarframeMarket from "@pages/warframe_market";
-import PWarframeMarketChat from "@pages/chat";
+const PWarframeMarket = lazy(routeLoaders.warframeMarket);
+const PWarframeMarketChat = lazy(routeLoaders.chat);
 
 // Trade messages
-import PTradeMessages from "@pages/trade_messages";
+const PTradeMessages = lazy(routeLoaders.tradeMessages);
 
 // About Page
-import AboutPage from "@pages/about";
+const AboutPage = lazy(routeLoaders.about);
 
 export function AppRoutes() {
   const { app_error } = useAppContext();
@@ -59,42 +63,42 @@ export function AppRoutes() {
 
   return (
     <BrowserRouter>
-      <Routes>
-        {!ShowErrorPage() && !IsUserBanned() && (
-          <>
-            <Route element={<AuthenticatedGate exclude goTo="/" />}>
-              <Route path="/auth" element={<LogOutLayout />}>
-                <Route path="login" element={<PLogin />} />
+        <Routes>
+          {!ShowErrorPage() && !IsUserBanned() && (
+            <>
+              <Route element={<AuthenticatedGate exclude goTo="/" />}>
+                <Route path="/auth" element={<LogOutLayout />}>
+                  <Route path="login" element={<PLogin />} />
+                </Route>
               </Route>
-            </Route>
-            <Route path="/" element={<LogInLayout />}>
-              <Route element={<AuthenticatedGate goTo="/auth/login" />}>
-                <Route path="/" element={<PHome />} />
-                <Route path="debug">
-                  <Route index element={<PDebug />} />
+              <Route path="/" element={<LogInLayout />}>
+                <Route element={<AuthenticatedGate goTo="/auth/login" />}>
+                  <Route path="/" element={<PHome />} />
+                  <Route path="debug">
+                    <Route index element={<PDebug />} />
+                  </Route>
+                  <Route path="live_scraper" element={<PLiveScraper />} />
+                  <Route path="warframe-market" element={<PWarframeMarket />} />
+                  <Route path="chat" element={<PWarframeMarketChat />} />
+                  <Route path="trading_analytics" element={<TradingAnalyticsPage />} />
+                  <Route path="trade_messages" element={<PTradeMessages />} />
+                  <Route path="about" element={<AboutPage />} />
                 </Route>
-                <Route path="live_scraper" element={<PLiveScraper />} />
-                <Route path="warframe-market" element={<PWarframeMarket />} />
-                <Route path="chat" element={<PWarframeMarketChat />} />
-                <Route path="trading_analytics" element={<TradingAnalyticsPage />} />
-                <Route path="trade_messages" element={<PTradeMessages />} />
-                <Route path="about" element={<AboutPage />} />
+                <Route path="*" element={<PHome />} />
               </Route>
-              <Route path="*" element={<PHome />} />
+            </>
+          )}
+          {ShowErrorPage() && (
+            <Route path="*" element={<LogOutLayout />}>
+              <Route path="*" element={<PError />} />
+            </Route>
+          )}
+          {IsUserBanned() && (
+            <Route path="*" element={<LogOutLayout />}>
+              <Route path="*" element={<PBanned />} />
             </Route>
-          </>
-        )}
-        {ShowErrorPage() && (
-          <Route path="*" element={<LogOutLayout />}>
-            <Route path="*" element={<PError />} />
-          </Route>
-        )}
-        {IsUserBanned() && (
-          <Route path="*" element={<LogOutLayout />}>
-            <Route path="*" element={<PBanned />} />
-          </Route>
-        )}
-      </Routes>
+          )}
+        </Routes>
     </BrowserRouter>
   );
 }

src/components/Layouts/Shared/NavbarMinimalColored/NavbarMinimalColored.tsx

@@ -12,13 +12,21 @@ export type NavbarLinkProps = {
   web?: boolean;
   hide?: boolean;
   onClick?(e: NavbarLinkProps): void;
+  onPrefetch?(): void;
 }
 
 function NavbarLink(props: NavbarLinkProps) {
-  const { icon: Icon, label, active, onClick } = props;
+  const { icon: Icon, label, active, onClick, onPrefetch } = props;
   return (
     <Tooltip label={label} position="right" transitionProps={{ duration: 0 }}>
-      <UnstyledButton onClick={() => { onClick && onClick(props); }} className={classes.link} data-active={active || undefined} data-rainbow-bg={true}>
+      <UnstyledButton
+        onClick={() => { onClick && onClick(props); }}
+        onMouseEnter={() => { onPrefetch && onPrefetch(); }}
+        onFocus={() => { onPrefetch && onPrefetch(); }}
+        className={classes.link}
+        data-active={active || undefined}
+        data-rainbow-bg={true}
+      >
         {Icon}
       </UnstyledButton>
     </Tooltip>