Sticker Tooltip: Fix missing added sticker sets (#1617)

src/components/left/settings/SettingsGeneral.tsx

@@ -1,5 +1,5 @@
 import React, {
-  FC, useCallback, memo, useEffect, useRef, useState,
+  FC, useCallback, memo, useRef, useState,
 } from '../../../lib/teact/teact';
 import { getDispatch, withGlobal } from '../../../lib/teact/teactn';
 
@@ -69,8 +69,6 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
 }) => {
   const {
     setSettingOption,
-    loadStickerSets,
-    loadAddedStickers,
   } = getDispatch();
 
   // eslint-disable-next-line no-null/no-null
@@ -90,16 +88,6 @@ const SettingsGeneral: FC<OwnProps & StateProps> = ({
     },
   ] : undefined;
 
-  useEffect(() => {
-    loadStickerSets();
-  }, [loadStickerSets]);
-
-  useEffect(() => {
-    if (stickerSetIds?.length) {
-      loadAddedStickers();
-    }
-  }, [stickerSetIds, loadAddedStickers]);
-
   const handleAnimationLevelChange = useCallback((newLevel: number) => {
     ANIMATION_LEVEL_OPTIONS.forEach((_, i) => {
       document.body.classList.toggle(`animation-level-${i}`, newLevel === i);

src/components/main/Main.tsx

@@ -69,6 +69,7 @@ type StateProps = {
   language?: LangCode;
   wasTimeFormatSetManually?: boolean;
   isCallFallbackConfirmOpen: boolean;
+  addedSetIds?: string[];
 };
 
 const NOTIFICATION_INTERVAL = 1000;
@@ -97,6 +98,7 @@ const Main: FC<StateProps> = ({
   language,
   wasTimeFormatSetManually,
   isCallFallbackConfirmOpen,
+  addedSetIds,
 }) => {
   const {
     loadAnimatedEmojis,
@@ -106,10 +108,14 @@ const Main: FC<StateProps> = ({
     loadTopInlineBots,
     loadEmojiKeywords,
     loadCountryList,
+    loadStickerSets,
+    loadAddedStickers,
+    loadFavoriteStickers,
     ensureTimeFormat,
     openStickerSetShortName,
     checkVersionNotification,
   } = getDispatch();
+  const isSynced = Boolean(lastSyncTime);
 
   if (DEBUG && !DEBUG_isLogged) {
     DEBUG_isLogged = true;
@@ -143,6 +149,18 @@ const Main: FC<StateProps> = ({
     }
   }, [language, lastSyncTime, loadCountryList, loadEmojiKeywords]);
 
+  // Sticker sets
+  useEffect(() => {
+    if (isSynced) {
+      if (!addedSetIds) {
+        loadStickerSets();
+        loadFavoriteStickers();
+      } else {
+        loadAddedStickers();
+      }
+    }
+  }, [isSynced, addedSetIds, loadStickerSets, loadFavoriteStickers, loadAddedStickers]);
+
   // Check version when service chat is ready
   useEffect(() => {
     if (lastSyncTime && isServiceChatReady) {
@@ -351,6 +369,7 @@ export default memo(withGlobal(
       language,
       wasTimeFormatSetManually,
       isCallFallbackConfirmOpen: Boolean(global.groupCalls.isFallbackConfirmOpen),
+      addedSetIds: global.stickers.added.setIds,
     };
   },
 )(Main));

src/components/middle/composer/StickerPicker.tsx

@@ -64,10 +64,7 @@ const StickerPicker: FC<OwnProps & StateProps> = ({
   onStickerSelect,
 }) => {
   const {
-    loadStickerSets,
     loadRecentStickers,
-    loadFavoriteStickers,
-    loadAddedStickers,
     addRecentSticker,
     unfaveSticker,
   } = getDispatch();
@@ -138,18 +135,10 @@ const StickerPicker: FC<OwnProps & StateProps> = ({
 
   useEffect(() => {
     if (loadAndPlay) {
-      loadStickerSets();
       loadRecentStickers();
-      loadFavoriteStickers();
       sendMessageAction({ type: 'chooseSticker' });
     }
-  }, [loadAndPlay, loadFavoriteStickers, loadRecentStickers, loadStickerSets, sendMessageAction]);
+  }, [loadAndPlay, loadRecentStickers, sendMessageAction]);
-
-  useEffect(() => {
-    if (addedSetIds?.length) {
-      loadAddedStickers();
-    }
-  }, [addedSetIds, loadAddedStickers]);
 
   useHorizontalScroll(headerRef.current);
 

src/components/middle/composer/hooks/useStickerTooltip.ts

@@ -26,7 +26,9 @@ export default function useStickerTooltip(
     if (isDisabled) return;
 
     if (isAllowed && isSingleEmoji) {
-      loadStickersForEmoji({ emoji: cleanHtml });
+      loadStickersForEmoji({
+        emoji: IS_EMOJI_SUPPORTED ? cleanHtml : cleanHtml.match(/alt="(.+)"/)?.[1],
+      });
     } else if (hasStickers || !isSingleEmoji) {
       clearStickersForEmoji();
     }

src/modules/actions/api/symbols.ts

@@ -15,8 +15,8 @@ import {
 import searchWords from '../../../util/searchWords';
 import { selectStickerSet } from '../../selectors';
 
-const ADDED_SETS_THROTTLE = 500;
+const ADDED_SETS_THROTTLE = 200;
-const ADDED_SETS_THROTTLE_CHUNK = 50;
+const ADDED_SETS_THROTTLE_CHUNK = 10;
 
 const searchThrottled = throttle((cb) => cb(), 500, false);
 

src/modules/actions/api/sync.ts

@@ -5,7 +5,6 @@ import {
 import {
   ApiChat, ApiFormattedText, ApiMessage, ApiUser, MAIN_THREAD_ID,
 } from '../../../api/types';
-import { GlobalActions } from '../../../global/types';
 
 import {
   CHAT_LIST_LOAD_SLICE, DEBUG, MESSAGE_LIST_SLICE, SERVICE_NOTIFICATIONS_USER_ID,
@@ -44,8 +43,8 @@ addReducer('sync', (global, actions) => {
   void sync(actions.afterSync);
 });
 
-addReducer('afterSync', (global, actions) => {
+addReducer('afterSync', () => {
-  void afterSync(actions);
+  void afterSync();
 });
 
 async function sync(afterSyncCallback: () => void) {
@@ -73,14 +72,12 @@ async function sync(afterSyncCallback: () => void) {
   afterSyncCallback();
 }
 
-async function afterSync(actions: GlobalActions) {
+async function afterSync() {
   if (DEBUG) {
     // eslint-disable-next-line no-console
     console.log('>>> START AFTER-SYNC');
   }
 
-  actions.loadFavoriteStickers();
-
   await Promise.all([
     loadAndUpdateUsers(),
     loadAndReplaceArchivedChats(),

src/modules/selectors/symbols.ts

@@ -25,6 +25,12 @@ export function selectStickerSetByShortName(global: GlobalState, shortName: stri
 export function selectStickersForEmoji(global: GlobalState, emoji: string) {
   const stickerSets = Object.values(global.stickers.setsById);
   let stickersForEmoji: ApiSticker[] = [];
+  // Favorites
+  global.stickers.favorite.stickers.forEach((sticker) => {
+    if (sticker.emoji === emoji) stickersForEmoji.push(sticker);
+  });
+
+  // Added sets
   stickerSets.forEach(({ packs }) => {
     if (!packs) {
       return;