fix: blockies cache size issue

dimyG · Apr 25, 2023 · e62f51d · e62f51d
1 parent 5ddde33
commit e62f51d
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 9 deletions.
diff --git a/frontend/app/src/auto-imports.d.ts b/frontend/app/src/auto-imports.d.ts
@@ -430,7 +430,7 @@ declare global {
  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
  const useInterval: typeof import('@vueuse/core')['useInterval']
  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
- const useItemCache: typeof import('./composables/useItemCache')['useItemCache']
+ const useItemCache: typeof import('./composables/item-cache')['useItemCache']
  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
  const useKrakenApi: typeof import('./composables/api/staking/kraken')['useKrakenApi']
  const useKrakenStakingEventTypes: typeof import('./composables/staking/kraken-events')['useKrakenStakingEventTypes']
@@ -1074,7 +1074,7 @@ declare module 'vue' {
  readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
  readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
  readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
- readonly useItemCache: UnwrapRef<typeof import('./composables/useItemCache')['useItemCache']>
+ readonly useItemCache: UnwrapRef<typeof import('./composables/item-cache')['useItemCache']>
  readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
  readonly useKrakenApi: UnwrapRef<typeof import('./composables/api/staking/kraken')['useKrakenApi']>
  readonly useKrakenStakingEventTypes: UnwrapRef<typeof import('./composables/staking/kraken-events')['useKrakenStakingEventTypes']>

diff --git a/frontend/app/src/components/display/EnsAvatar.vue b/frontend/app/src/components/display/EnsAvatar.vue
@@ -30,8 +30,10 @@ const css = useCssModule();
 
 <template>
  <div :class="css.wrapper">
- <v-img :src="getBlockie(address)" />
- <v-img v-if="avatarUrl" :class="css.avatar" :src="avatarUrl" />
+ <v-lazy>
+ <v-img :src="getBlockie(address)" />
+ <v-img v-if="avatarUrl" :class="css.avatar" :src="avatarUrl" />
+ </v-lazy>
  </div>
 </template>
 <style lang="scss" module>

diff --git a/frontend/app/src/composables/accounts/blockie.ts b/frontend/app/src/composables/accounts/blockie.ts
@@ -3,9 +3,13 @@ const CACHE_SIZE = 100;
 export const useBlockie = createSharedComposable(() => {
  const cache: Map<string, string> = new Map();
 
+ const { itemsPerPage } = storeToRefs(useFrontendSettingsStore());
+
  const put = (address: string, image: string) => {
- if (cache.size === CACHE_SIZE) {
- logger.debug(`Hit cache size of ${CACHE_SIZE} going to evict items`);
+ const cacheSize = Math.max(CACHE_SIZE, 3 * get(itemsPerPage));
+
+ if (cache.size === cacheSize) {
+ logger.debug(`Hit cache size of ${cacheSize} going to evict items`);
  const removeKey = cache.keys().next().value;
  cache.delete(removeKey);
  }

diff --git a/frontend/app/src/composables/useItemCache.ts → frontend/app/src/composables/item-cache.ts b/frontend/app/src/composables/useItemCache.ts → frontend/app/src/composables/item-cache.ts
diff --git a/frontend/app/src/store/assets/asset-cache.ts b/frontend/app/src/store/assets/asset-cache.ts
@@ -8,7 +8,7 @@ export const useAssetCacheStore = defineStore('assets/cache', () => {
  const { assetMapping } = useAssetInfoApi();
 
  const { cache, isPending, retrieve, reset } = useItemCache<AssetInfo>(
- async keys => {
+ async (keys: string[]) => {
  const response = await assetMapping(keys);
  return function* () {
  for (const key of keys) {

diff --git a/frontend/app/tests/unit/specs/composables/accounts/blockie.spec.ts b/frontend/app/tests/unit/specs/composables/accounts/blockie.spec.ts
@@ -1,13 +1,13 @@
-import { createBlockie } from '@/utils/blockie';
+import { createPinia, setActivePinia } from 'pinia';
 
 describe('composables::accounts/blockie', () => {
+ setActivePinia(createPinia());
  const { cache, getBlockie } = useBlockie();
  let firstBlockie = '';
  const address = '0x790b4086d106eafd913e71843aed987efe291c92';
 
  beforeEach(() => {
  vi.clearAllMocks();
- vi.resetAllMocks();
  });
 
  it('should create new blockie', () => {