chore: lazy import json animation data

src/constants.tsx

@@ -1,8 +1,3 @@
-import queryIcon from "~/assets/animation/query.json";
-import explorerIcon from "~/assets/animation/explorer.json";
-import designerIcon from "~/assets/animation/designer.json";
-import authIcon from "~/assets/animation/auth.json";
-
 import {
 	AuthMode,
 	CodeLang,
@@ -103,28 +98,28 @@ export const VIEW_MODES: Record<ViewMode, ViewInfo> = {
 		id: "query",
 		name: "Query",
 		icon: iconQuery,
-		anim: queryIcon,
+		anim: import("~/assets/animation/query.json").then(x => x.default),
 		desc: "Execute queries against the database and inspect the results",
 	},
 	explorer: {
 		id: "explorer",
 		name: "Explorer",
 		icon: iconExplorer,
-		anim: explorerIcon,
+		anim: import("~/assets/animation/explorer.json").then(x => x.default),
 		desc: "Explore the database tables, records, and relations",
 	},
 	designer: {
 		id: "designer",
 		name: "Designer",
 		icon: iconDesigner,
-		anim: designerIcon,
+		anim: import("~/assets/animation/designer.json").then(x => x.default),
 		desc: "Define database tables and relations",
 	},
 	authentication: {
 		id: "authentication",
 		name: "Authentication",
 		icon: iconAuth,
-		anim: authIcon,
+		anim: import("~/assets/animation/auth.json").then(x => x.default),
 		desc: "Manage account details and database scopes",
 	},
 	functions: {

src/hooks/hover-icon.ts

@@ -46,14 +46,15 @@ export function useHoverIcon(options: HoverIconOptions) {
 
 		const loadLottie = async () => {
 			const lottie = await import('lottie-web/build/player/lottie_light');
+			const animationData = await Promise.resolve(options.animation);
 
 			if (isMounted && ref.current) {
 				const item = lottie.default.loadAnimation({
 					container: ref.current,
 					renderer: 'svg',
 					autoplay: false,
 					loop: false,
-					animationData: options.animation,
+					animationData,
 					rendererSettings: {
 						className: options.className
 					}

src/views/query/QueryPane/index.tsx

@@ -1,4 +1,3 @@
-import autoFixAnim from "~/assets/animation/autofix.json";
 import { useStable } from "~/hooks/stable";
 import { ContentPane } from "~/components/Pane";
 import { useDebouncedFunction } from "~/hooks/debounce";
@@ -148,7 +147,7 @@ export function QueryPane({
 							<HoverIcon
 								color="slate"
 								onClick={inferVariables}
-								animation={autoFixAnim}
+								animation={import("~/assets/animation/autofix.json").then(x => x.default)}
 							/>
 						</Tooltip>