Skip to content

Commit

Permalink
chore: lazy import json animation data
Browse files Browse the repository at this point in the history
  • Loading branch information
Odonno committed May 24, 2024
1 parent 85ef220 commit 5b86d71
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 12 deletions.
13 changes: 4 additions & 9 deletions src/constants.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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: {
Expand Down
3 changes: 2 additions & 1 deletion src/hooks/hover-icon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
3 changes: 1 addition & 2 deletions src/views/query/QueryPane/index.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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>

Expand Down

0 comments on commit 5b86d71

Please sign in to comment.