fix images, lazy load libcurl

src/components/shortcut-card.tsx

@@ -22,7 +22,7 @@ export default function ShortcutCard({ app }: { app: Application }) {
 					res.blob().then((blob) => URL.createObjectURL(blob) as string),
 				),
 		);
-	}, []); // eslint-disable-line react-hooks/exhaustive-deps
+	}, [app.image]); // eslint-disable-line react-hooks/exhaustive-deps
 	return (
 		<Link to={`/view/${encoder.encode(app.url)}`}>
 			<Card className="my-2 flex h-[20rem] w-72 flex-col items-center justify-center duration-200 hover:bg-secondary">
@@ -34,13 +34,13 @@ export default function ShortcutCard({ app }: { app: Application }) {
 					{!error ? (
 						!loading ? (
 							<img
-								src={image as string}
-								width={150}
-								height={75}
+								src={image as string | undefined}
+								width={125}
+								height={50}
 								className="aspect-video	h-32 w-56 rounded-lg object-cover"
 							/>
 						) : (
-							<Skeleton className="	h-32 w-56 rounded-lg object-cover" />
+							<Skeleton className="aspect-video h-32 w-56 rounded-lg object-cover" />
 						)
 					) : (
 						<div className="flex h-32 w-56 items-center justify-center rounded-lg bg-secondary text-lg text-destructive">

src/main.tsx

@@ -3,7 +3,6 @@ import { useEffect, StrictMode, lazy, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 // libraries
 import localforage from "localforage";
-import { libcurl } from "libcurl.js/bundled";
 // css
 import "@/index.css";
 // routes
@@ -44,17 +43,6 @@ export default function App() {
 			);
 		}
 	}, []);
-	useEffect(() => {
-		const handleLibcurlLoad = () => {
-			libcurl.set_websocket(
-				`${location.protocol.replace("http", "ws")}//${location.hostname}:${location.port}/wisp/`,
-			);
-			console.log("\x1b[34;49;1m[Ephemeral] \x1B[32mINFO: Libcurl.js ready!");
-		};
-		document.addEventListener("libcurl_load", handleLibcurlLoad);
-		return () =>
-			document.removeEventListener("libcurl_load", handleLibcurlLoad);
-	}, []);
 	localforage.config({
 		driver: localforage.INDEXEDDB,
 		name: "ephemeral",

src/routes.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { createBrowserRouter, RouterProvider, json } from "react-router-dom";
 // layouts
 import RootLayout from "@/root-layout";
@@ -9,6 +10,8 @@ import Settings from "@/pages/Settings";
 import Apps from "@/pages/Apps";
 import ServiceWorkerError from "@/pages/ServiceWorkerError";
 import Error from "@/pages/error";
+// libcurl
+import { libcurl } from "libcurl.js/bundled";
 const routes = createBrowserRouter([
 	{
 		Component: RootLayout,
@@ -52,5 +55,17 @@ const routes = createBrowserRouter([
 		],
 	},
 ]);
-const AppRoutes = () => <RouterProvider router={routes} />;
-export default AppRoutes;
+export default function AppRoutes() {
+	useEffect(() => {
+		const handleLibcurlLoad = () => {
+			libcurl.set_websocket(
+				`${location.protocol.replace("http", "ws")}//${location.hostname}:${location.port}/wisp/`,
+			);
+			console.log("\x1b[34;49;1m[Ephemeral] \x1B[32mINFO: Libcurl.js ready!");
+		};
+		document.addEventListener("libcurl_load", handleLibcurlLoad);
+		return () =>
+			document.removeEventListener("libcurl_load", handleLibcurlLoad);
+	}, []);
+	return <RouterProvider router={routes} />;
+}

vite.config.ts

@@ -12,7 +12,7 @@ const __dirname = path.resolve();
 export default defineConfig({
 	build: {
 		target: "ES2022",
-		chunkSizeWarningLimit: 2500,
+		chunkSizeWarningLimit: 2700,
 	},
 	plugins: [
 		viteStaticCopy({