feat(frontend): Cache NFTs store

src/frontend/src/lib/api/idb-nfts.api.ts

@@ -0,0 +1,32 @@
+import { browser } from '$app/environment';
+import type { SetIdbNftsParams } from '$lib/types/idb-nfts';
+import { isNullish } from '@dfinity/utils';
+import type { Principal } from '@icp-sdk/core/principal';
+import { createStore, get, set as idbSet, type UseStore } from 'idb-keyval';
+
+// There is no IndexedDB in SSG. Since this initialization occurs at the module's root, SvelteKit would encounter an error during the dapp bundling process, specifically a "ReferenceError [Error]: indexedDB is not defined". Therefore, the object for bundling on NodeJS side.
+const idbNftsStore = (key: string): UseStore =>
+	browser ? createStore(`oisy-${key}-nfts`, `${key}-nfts`) : ({} as unknown as UseStore);
+
+const idbAllNftsStore = idbNftsStore('all');
+
+export const setIdbNftsStore = async ({
+	identity,
+	nfts,
+	idbNftsStore
+}: SetIdbNftsParams & {
+	idbNftsStore: UseStore;
+}) => {
+	if (isNullish(identity)) {
+		return;
+	}
+
+	await idbSet(identity.getPrincipal().toText(), nfts, idbNftsStore);
+};
+
+export const setIdbAllNfts = (params: SetIdbNftsParams): Promise<void> =>
+	setIdbNftsStore({ ...params, idbNftsStore: idbAllNftsStore });
+
+export const getIdbAllNfts = (
+	principal: Principal
+): Promise<SetIdbNftsParams['nfts'] | undefined> => get(principal.toText(), idbAllNftsStore);

src/frontend/src/lib/components/loaders/LoaderNfts.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { debounce } from '@dfinity/utils';
+	import { debounce, isNullish, nonNullish } from '@dfinity/utils';
 	import { untrack } from 'svelte';
+	import { getIdbAllNfts, setIdbAllNfts } from '$lib/api/idb-nfts.api';
 	import IntervalLoader from '$lib/components/core/IntervalLoader.svelte';
 	import { NFT_TIMER_INTERVAL_MILLIS } from '$lib/constants/app.constants';
 	import { ethAddress } from '$lib/derived/address.derived';
@@ -10,7 +11,31 @@
 	import { nftStore } from '$lib/stores/nft.store';
 	import { getTokensByNetwork } from '$lib/utils/nft.utils';
 
+	let nftCacheLoaded = $state(false);
+
+	const loadCachedNfts = async () => {
+		if (isNullish($authIdentity)) {
+			return;
+		}
+
+		const cachedNfts = await getIdbAllNfts($authIdentity.getPrincipal());
+
+		if (isNullish(cachedNfts) || cachedNfts.length === 0) {
+			nftCacheLoaded = true;
+
+			return;
+		}
+
+		nftStore.addAll(cachedNfts);
+
+		nftCacheLoaded = true;
+	};
+
 	const onLoad = async () => {
+		if (!nftCacheLoaded) {
+			await loadCachedNfts();
+		}
+
 		const tokensByNetwork = getTokensByNetwork($enabledNonFungibleTokens);
 
 		const promises = Array.from(tokensByNetwork).map(async ([networkId, tokens]) => {
@@ -34,6 +59,16 @@
 
 		untrack(() => debounceLoad());
 	});
+
+	$effect(() => {
+		if (nftCacheLoaded && nonNullish($nftStore)) {
+			// TODO: Needs to parse symbols properly before storing
+			setIdbAllNfts({
+				identity: $authIdentity,
+				nfts: $nftStore
+			});
+		}
+	});
 </script>
 
 <IntervalLoader interval={NFT_TIMER_INTERVAL_MILLIS} {onLoad} skipInitialLoad={true} />

src/frontend/src/lib/types/idb-nfts.ts

@@ -0,0 +1,7 @@
+import type { OptionIdentity } from '$lib/types/identity';
+import type { Nft } from '$lib/types/nft';
+
+export interface SetIdbNftsParams {
+	identity: OptionIdentity;
+	nfts: Nft[];
+}