Skip to content

Commit

Permalink
docs: don't mount icons on start (#6691)
Browse files Browse the repository at this point in the history
- closed #6686
Сейчас в стайлгайде иконки монтируются сразу при открытии страницы. Это было сделано для копирования иконок в Frame. Данный способ серьезно замедляет открытие страницы и также монтирует очень большое количество DOM нод

Избавился от монтирование иконок на старте и добавил обсервер на спрайт
  • Loading branch information
SevereCloud authored and actions-user committed Mar 14, 2024
1 parent 33bd0af commit a678506
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 14 deletions.
13 changes: 8 additions & 5 deletions styleguide/Components/Frame/Frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,26 @@ const FrameDomProvider = ({ platform, appearanceOptions, themeName, children })
const loaded = useLoadThemeTokens(themeName, appearanceOptions, frame.document);

React.useEffect(() => {
const hotObservers = [];

// Пихаем в iFrame с примером спрайты для иконок
const sprite = document.getElementById('__SVG_SPRITE_NODE__');
const masks = document.getElementById('__SVG_MASKS_NODE__');

if (sprite) {
frame.document.body.appendChild(sprite.cloneNode(true));
}

if (masks) {
frame.document.body.appendChild(masks.cloneNode(true));
}
const hotIconChange = new MutationObserver(() => {
frame.document.getElementById('__SVG_SPRITE_NODE__').remove();
frame.document.body.appendChild(sprite.cloneNode(true));
});
hotIconChange.observe(sprite, { characterData: true, childList: true });
hotObservers.push(hotIconChange);

frame.document.querySelector('.frame-content').setAttribute('id', 'root');

// Пихаем в iFrame vkui стили
const frameAssets = document.createDocumentFragment();
const hotObservers = [];
Array.from(document.getElementsByClassName('vkui-style')).map((style) => {
const frameStyle = style.cloneNode(true);
frameAssets.appendChild(frameStyle);
Expand Down
10 changes: 1 addition & 9 deletions styleguide/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,7 @@ for (let name in ui) {

Object.getOwnPropertyNames(Icons).forEach((name) => {
if (name.startsWith('Icon')) {
const icon = Icons[name];
window[name] = icon;

if (typeof icon.mountIcon === 'function') {
// Нужно смонтировать символ иконки до того, как общий спрайт будет клонирован во все iframe предпросмотры компонентов.
// Раньше код для добавления SVG-символа в спрайт находился в корне модуля,
// а теперь по-умолчанию символ добавляется только во время первого рендера иконки.
icon.mountIcon();
}
window[name] = Icons[name];
}
});

Expand Down

0 comments on commit a678506

Please sign in to comment.