3 files changed, 41 insertions, 9 deletions

diff --git a/app/assets/javascripts/emoji/awards_app/index.js b/app/assets/javascripts/emoji/awards_app/index.js
index 1a084d37762..0986533dcd1 100644
--- a/app/assets/javascripts/emoji/awards_app/index.js
+++ b/app/assets/javascripts/emoji/awards_app/index.js
@@ -12,6 +12,7 @@ export default (el) => {
 
   return new Vue({
     el,
+    name: 'AwardsListRoot',
     store: createstore(),
     computed: {
       ...mapState(['currentUserId', 'canAwardEmoji', 'awards']),
diff --git a/app/assets/javascripts/emoji/awards_app/store/actions.js b/app/assets/javascripts/emoji/awards_app/store/actions.js
index f0340209248..f83bfe614dd 100644
--- a/app/assets/javascripts/emoji/awards_app/store/actions.js
+++ b/app/assets/javascripts/emoji/awards_app/store/actions.js
@@ -33,20 +33,51 @@ export const fetchAwards = async ({ commit, dispatch, state }, page = '1') => {
   }
 };
 
+/**
+ * Creates an intermediary award, used for display
+ * until the real award is loaded from the backend.
+ */
+const newOptimisticAward = (name, state) => {
+  const freeId = Math.min(...state.awards.map((a) => a.id), Number.MAX_SAFE_INTEGER) - 1;
+  return {
+    id: freeId,
+    name,
+    user: {
+      id: window.gon.current_user_id,
+      name: window.gon.current_user_fullname,
+      username: window.gon.current_username,
+    },
+  };
+};
+
 export const toggleAward = async ({ commit, state }, name) => {
   const award = state.awards.find((a) => a.name === name && a.user.id === state.currentUserId);
 
   try {
     if (award) {
-      await axios.delete(joinPaths(gon.relative_url_root || '', `${state.path}/${award.id}`));
-
       commit(REMOVE_AWARD, award.id);
 
+      await axios
+        .delete(joinPaths(gon.relative_url_root || '', `${state.path}/${award.id}`))
+        .catch((err) => {
+          commit(ADD_NEW_AWARD, award);
+
+          throw err;
+        });
+
       showToast(__('Award removed'));
     } else {
-      const { data } = await axios.post(joinPaths(gon.relative_url_root || '', state.path), {
-        name,
-      });
+      const optimisticAward = newOptimisticAward(name, state);
+
+      commit(ADD_NEW_AWARD, optimisticAward);
+
+      const { data } = await axios
+        .post(joinPaths(gon.relative_url_root || '', state.path), {
+          name,
+        })
+        .finally(() => {
+          commit(REMOVE_AWARD, optimisticAward.id);
+        });
 
       commit(ADD_NEW_AWARD, data);
 
diff --git a/app/assets/javascripts/emoji/components/utils.js b/app/assets/javascripts/emoji/components/utils.js
index 3465a8ae7e6..5eec0992896 100644
--- a/app/assets/javascripts/emoji/components/utils.js
+++ b/app/assets/javascripts/emoji/components/utils.js
@@ -1,5 +1,5 @@
-import Cookies from 'js-cookie';
 import { chunk, memoize, uniq } from 'lodash';
+import { getCookie, setCookie } from '~/lib/utils/common_utils';
 import { initEmojiMap, getEmojiCategoryMap } from '~/emoji';
 import {
   EMOJIS_PER_ROW,
@@ -13,7 +13,7 @@ export const generateCategoryHeight = (emojisLength) =>
   emojisLength * EMOJI_ROW_HEIGHT + CATEGORY_ROW_HEIGHT;
 
 export const getFrequentlyUsedEmojis = () => {
-  const savedEmojis = Cookies.get(FREQUENTLY_USED_COOKIE_KEY);
+  const savedEmojis = getCookie(FREQUENTLY_USED_COOKIE_KEY);
 
   if (!savedEmojis) return null;
 
@@ -30,13 +30,13 @@ export const getFrequentlyUsedEmojis = () => {
 
 export const addToFrequentlyUsed = (emoji) => {
   const frequentlyUsedEmojis = uniq(
-    (Cookies.get(FREQUENTLY_USED_COOKIE_KEY) || '')
+    (getCookie(FREQUENTLY_USED_COOKIE_KEY) || '')
       .split(',')
       .filter((e) => e)
       .concat(emoji),
   );
 
-  Cookies.set(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','), { expires: 365 });
+  setCookie(FREQUENTLY_USED_COOKIE_KEY, frequentlyUsedEmojis.join(','));
 };
 
 export const hasFrequentlyUsedEmojis = () => getFrequentlyUsedEmojis() !== null;