fix: change to fnv algo

common/utils.js

@@ -4,6 +4,7 @@ import {
   VALIDATION_MESSAGE_TYPES,
 } from './constants';
 import Vue from 'vue';
+import fnv from 'fnv-plus';
 
 let UNIQUE_ID_COUNTER = 0;
 let TIMER;
@@ -30,10 +31,10 @@ export function getUniqueString (prefix = DEFAULT_PREFIX) {
  * based on that string.
  * @returns {*} - the random element
  */
-export async function getRandomElement (array, seed) {
+export function getRandomElement (array, seed) {
   if (seed) {
-    const hash = await hashSha256(seed);
-    return array[hash % array.length];
+    const hash = fnv.hash(seed);
+    return array[hash.value % array.length];
   } else {
     return array[getRandomInt(array.length)];
   }
@@ -157,23 +158,6 @@ export const pascalCaseToKebabCase = (string) => {
     .replace(/^-/, '');
 };
 
-/**
- * Hash a string using SHA-256
- * @param {string} the string to hash
- * @returns {Number} the number that was hashed from the string
- */
-export function hashSha256 (string) {
-  const utf8 = new TextEncoder().encode(string);
-  return crypto.subtle.digest('SHA-256', utf8).then((hashBuffer) => {
-    const hashArray = Array.from(new Uint8Array(hashBuffer));
-    const hashHex = hashArray
-      .map((bytes) => bytes.toString(16).padStart(2, '0'))
-      .join('');
-
-    return Number('0x' + hashHex);
-  });
-}
-
 /*
 * Set's a global timer to debounce the execution of a function.
 * @param { object } func - the function that is going to be called after timeout
@@ -215,7 +199,6 @@ export default {
   htmlFragment,
   flushPromises,
   kebabCaseToPascalCase,
-  hashSha256,
   debounce,
   isOutOfViewPort,
 };

components/avatar/avatar.vue

@@ -207,7 +207,6 @@ export default {
       slottedInitials: '',
       formattedInitials: '',
       initializing: false,
-      internalColor: '',
     };
   },
 
@@ -219,7 +218,7 @@ export default {
         this.avatarClass,
         {
           'd-avatar--group': this.showGroup,
-          [`d-avatar--color-${this.internalColor}`]: this.kind !== 'icon' && this.internalColor,
+          [`d-avatar--color-${this.getColor()}`]: this.kind !== 'icon',
         },
       ];
     },
@@ -255,24 +254,6 @@ export default {
     },
   },
 
-  watch: {
-    color: {
-      handler: function () {
-        this.getColor();
-      },
-
-      immediate: true,
-    },
-
-    seed: {
-      handler: function () {
-        this.getColor();
-      },
-
-      immediate: true,
-    },
-  },
-
   mounted () {
     this.init();
   },
@@ -344,9 +325,8 @@ export default {
       return element?.tagName?.toUpperCase() === 'IMG';
     },
 
-    async getColor () {
-      const color = this.color ?? await getRandomElement(AVATAR_COLORS, this.seed);
-      this.internalColor = color;
+    getColor () {
+      return this.color ?? getRandomElement(AVATAR_COLORS, this.seed);
     },
 
     validateImageAttrsPresence () {

package.json

@@ -40,6 +40,7 @@
     "@tiptap/vue-2": "^2.0.2",
     "emoji-regex": "^10.2.1",
     "emoji-toolkit": "^6.6.0",
+    "fnv-plus": "^1.3.1",
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {