Improve channel's avatar display performance

3 files changed, 52 insertions, 0 deletions

diff --git a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
index 59814a93d..631444398 100644
--- a/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
+++ b/client/src/app/+accounts/account-video-channels/account-video-channels.component.ts
@@ -5,6 +5,7 @@ import { ComponentPagination, hasMoreItems, MarkdownService, User, UserService }
 import { Account, AccountService, Video, VideoChannel, VideoChannelService, VideoService } from '@app/shared/shared-main'
 import { MiniatureDisplayOptions } from '@app/shared/shared-video-miniature'
 import { NSFWPolicyType, VideoSortField } from '@shared/models'
+import { SimpleMemoize } from '@app/helpers'
 
 @Component({
   selector: 'my-account-video-channels',
@@ -145,6 +146,7 @@ export class AccountVideoChannelsComponent implements OnInit, OnDestroy {
     this.loadMoreChannels()
   }
 
+  @SimpleMemoize()
   getVideoChannelLink (videoChannel: VideoChannel) {
     return [ '/c', videoChannel.nameWithHost ]
   }
diff --git a/client/src/app/helpers/utils/index.ts b/client/src/app/helpers/utils/index.ts
index f821985c9..afa8f8f5c 100644
--- a/client/src/app/helpers/utils/index.ts
+++ b/client/src/app/helpers/utils/index.ts
@@ -2,6 +2,7 @@ export * from './channel'
 export * from './date'
 export * from './html'
 export * from './object'
+export * from './simple-memoize'
 export * from './dom'
 export * from './upload'
 export * from './url'
diff --git a/client/src/app/helpers/utils/simple-memoize.ts b/client/src/app/helpers/utils/simple-memoize.ts
new file mode 100644
index 000000000..e8292793f
--- /dev/null
+++ b/client/src/app/helpers/utils/simple-memoize.ts
@@ -0,0 +1,49 @@
+/**
+ *
+ * Simple memoize only support methods that accept 0 or 1 argument
+ * You can easily use it adding @SimpleMemoize just above the method name
+ *
+ */
+
+export function SimpleMemoize () {
+  const store = new Map()
+
+  return (_target: object, _propertyKey: string, descriptor: TypedPropertyDescriptor<any>) => {
+    if (descriptor.value != null) {
+      descriptor.value = getNewFunction(descriptor.value, store)
+      return
+    }
+
+    throw new Error('Only put a Memoize() decorator on a method accessor.')
+  }
+}
+
+function getNewFunction (originalMethod: () => void, store: Map<any, any>) {
+  return function (this: any, ...args: any[]) {
+    if (args.length > 1) {
+      throw new Error('Simple memoize only support 0 or 1 argument')
+    }
+
+    let returnedValue: any
+
+    if (args.length > 0) {
+      const hashKey = args[0]
+
+      if (store.has(hashKey)) {
+        returnedValue = store.get(hashKey)
+      } else {
+        returnedValue = originalMethod.apply(this, args)
+        store.set(hashKey, returnedValue)
+      }
+    } else {
+      if (store.has(this)) {
+        returnedValue = store.get(this)
+      } else {
+        returnedValue = originalMethod.apply(this, args)
+        store.set(this, returnedValue)
+      }
+    }
+
+    return returnedValue
+  }
+}