@gravity-ui/blog-constructor 3.4.0 → 4.0.0-alpha.0

package/build/cjs/counters/metrika.js

@@ -0,0 +1,173 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCounters = void 0;
+/**
+ * @deprecated Metrika will be deleted after launch of analyticsEvents
+ */
+const Goal = {
+    SUPPORT_OPEN_FORM: 'SUPPORTOPENFORM',
+    SUPPORT_STEP_1_SUBMIT: 'SUPPORTSTEP1SUBMIT',
+    SUPPORT_STEP_2_SUBMIT: 'SUPPORTSTEP2SUBMIT',
+    SUPPORT_STEP_3_SUBMIT: 'SUPPORTSTEP3SUBMIT',
+    SUPPORT_THANKYOU_SUBMIT: 'SUPPORTTHANKYOUSUBMIT',
+    MP_OPEN_FORM: 'MPOPENFORM',
+    EDIT_ON_GITHUB: 'EDITONGITHUB',
+    MAIN_GO_TO_VAR: 'MAINGOTOVAR',
+    MAIN_GO_TO_ISV: 'MAINGOTOISV',
+    MAIN_ALL_PARTNERS: 'MAINALLPARTNERS',
+    FIND_GO_TO_VAR: 'FINDGOTOVAR',
+    ISV_GO_TO_MP: 'ISVGOTOMP',
+    FOOTER_SUBSCRIBE: 'FOOTERSUBSCRIBE',
+    FOOTER_MNG_SUBSCRIPTIONS: 'FOOTERMNGSUBSCRIPTIONS',
+    MOBILE_STORE_IOS: '154_Mobile_App_Store_Badge',
+    MOBILE_STORE_ANDROID: '155_Mobile_Google_Play_Badge',
+    REGION_POPUP_SHOW: 'REGIONPOPUP',
+    REGION_POPUP_YES: 'REGIONPOPUPYES',
+    REGION_POPUP_NO: 'REGIONPOPUPNO',
+    REGION_POPUP_CLOSE: 'REGIONPOPUPCLOSE',
+    SCALE_REGISTRATION: 'Scale_registration',
+    DLGOTOPRODUCT_MPSITE: 'DLGOTOPRODUCT_MPSITE',
+    MPK8S_CLCK: 'MPK8S_CLCK',
+    'SITE_CALCULATOR_SHARE-RESULT_CLICK': 'SITE_CALCULATOR_SHARE-RESULT_CLICK',
+};
+const HIT_COUNTERS = ['main', 'cross-site', 'scale'];
+const counterIds = {};
+function getCounter(name) {
+    const counterId = counterIds[name];
+    return window['yaCounter' + counterId];
+}
+function initCounters(configs) {
+    configs.forEach((config) => {
+        counterIds[config.name] = config.id;
+    });
+}
+exports.initCounters = initCounters;
+function hit(...args) {
+    HIT_COUNTERS.forEach((counterName) => {
+        const counter = getCounter(counterName);
+        if (!counter) {
+            return;
+        }
+        counter.hit(...args);
+    });
+}
+function params(...args) {
+    const counter = getCounter('main');
+    if (!counter) {
+        return;
+    }
+    counter.params(...args);
+}
+function reachGoal(counterName, ...args) {
+    const counter = getCounter(counterName);
+    if (!counter) {
+        return;
+    }
+    counter.reachGoal(...args);
+}
+function reachGoals(goals, counterName = 'main') {
+    if (!goals) {
+        return;
+    }
+    const goalsArray = Array.isArray(goals) ? goals : [goals];
+    goalsArray.forEach((goal) => {
+        if (typeof goal === 'object') {
+            reachGoal(counterName, goal.name, goal.params);
+        }
+        else {
+            reachGoal(counterName, goal);
+        }
+    });
+}
+// eslint-disable-next-line complexity
+function getServicePrefix(id) {
+    switch (id) {
+        case 'compute':
+            return 'CMPT';
+        case 'iam':
+            return 'IAM';
+        case 'vpc':
+            return 'VPC';
+        case 'storage':
+            return 'STRG';
+        case 'speechkit':
+            return 'SK';
+        case 'managed-clickhouse':
+            return 'CH';
+        case 'managed-mongodb':
+            return 'MONGO';
+        case 'managed-postgresql':
+            return 'POSTGR';
+        case 'managed-redis':
+            return 'MR';
+        case 'managed-mysql':
+            return 'MMSQL';
+        case 'managed-kubernetes':
+            return 'MK';
+        case 'translate':
+            return 'TRSL';
+        case 'instance-groups':
+            return 'INSTGR';
+        case 'load-balancer':
+            return 'LB';
+        case 'message-queue':
+            return 'MQ';
+        case 'datalens':
+            return 'DL';
+        case 'monitoring':
+            return 'MNTRG';
+        case 'data-proc':
+            return 'DP';
+        case 'kms':
+            return 'KMS';
+        case 'ydb':
+            return 'YDB';
+        case 'interconnect':
+            return 'INTRCNCT';
+    }
+    return undefined;
+}
+function getMarketPlacePrefix(id) {
+    return `product_${id}_`;
+}
+function goalGoToConsole(prefix) {
+    return prefix && `${prefix}GOTOCONSOLE`;
+}
+function goalGoToForm(prefix) {
+    return prefix && `${prefix}GOTOFORM`;
+}
+function goalGoToDocs(prefix) {
+    return prefix && `${prefix}GOTODOCS`;
+}
+function goalFormSubmit(prefix) {
+    return prefix && `${prefix}FORMSUBMIT`;
+}
+function goalEventFormSubmit(id) {
+    return `event${id || 's'}_form_submit`;
+}
+function goalEventVideoAction(id, action) {
+    return `event${id}_video_${action}`;
+}
+function goalCaseFormSubmit(id) {
+    return `case${id ? `_${id}` : 's'}_form_submit`;
+}
+function goalSwitchLang(place) {
+    return `SWITCH_LANG_${place}`;
+}
+exports.default = {
+    hit,
+    params,
+    reachGoal,
+    reachGoals,
+    Goal,
+    getServicePrefix,
+    getMarketPlacePrefix,
+    goalGoToConsole,
+    goalGoToForm,
+    goalGoToDocs,
+    goalFormSubmit,
+    goalEventFormSubmit,
+    goalEventVideoAction,
+    goalCaseFormSubmit,
+    goalSwitchLang,
+};

package/build/cjs/models/common.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { HeaderBlockProps as PageConstructorHeaderBlockProps } from '@gravity-ui/page-constructor';
 import { IBrowser, IDevice } from 'ua-parser-js';
+import { HeaderBlockProps as PageConstructorHeaderBlockProps } from '@gravity-ui/page-constructor';
 import { Locale } from '../models/locale';
 export declare enum Theme {
     Light = "light",
@@ -161,7 +161,3 @@ export declare enum DefaultEventNames {
     Service = "selector-service-click",
     SaveOnly = "save-only-button-click"
 }
-export type FetchArgs = {
-    page?: number;
-    query: Query;
-};

package/build/cjs/utils/common.d.ts

@@ -23,7 +23,7 @@ export declare const updateContentSizes: ({ size, colSizes, theme, ...contentDat
         md: number;
     } | Partial<Record<import("@gravity-ui/page-constructor").GridColumnSize, number>>;
     theme: import("@gravity-ui/page-constructor").ContentTheme;
-    title?: string | import("@gravity-ui/page-constructor").TitleBaseProps | undefined;
+    title?: string | import("@gravity-ui/page-constructor").TitleItemBaseProps | undefined;
     text?: string | undefined;
     additionalInfo?: string | undefined;
     links?: import("@gravity-ui/page-constructor").LinkProps[] | undefined;

package/build/cjs/utils/common.js

@@ -13,8 +13,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollOnPageChange = exports.getFeedQueryParams = exports.getBlogElementMetrika = exports.isMetrikaExist = exports.getBreadcrumbs = exports.getBlogPath = exports.updateContentSizes = exports.getTagFilterUrl = exports.postLikeStatus = exports.getTags = exports.scrollToHash = exports.getPageSearchParams = exports.getAbsolutePath = void 0;
 const url_1 = require("url");
-const page_constructor_1 = require("@gravity-ui/page-constructor");
 const lodash_1 = require("lodash");
+const page_constructor_1 = require("@gravity-ui/page-constructor");
 const constants_1 = require("../blocks/constants");
 const i18n_1 = require("../i18n");
 function getAbsolutePath(router, url) {

package/build/esm/blocks/Feed/Feed.js

@@ -27,10 +27,11 @@ export const Feed = ({ image }) => {
     const { posts, totalCount, tags, services, pinnedPost, getPosts, pageCountForShowSupportButtons, } = useContext(FeedContext);
     const router = useContext(RouterContext);
     const handleAnalytics = useAnalytics(DefaultEventNames.ShowMore);
-    const [{ errorLoad, errorShowMore, isFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = useReducer(reducer, {
+    const [{ errorLoad, errorShowMore, isFetching, isShowMoreFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = useReducer(reducer, {
         errorLoad: false,
         errorShowMore: false,
         isFetching: false,
+        isShowMoreFetching: false,
         isShowMoreVisible: true,
         lastLoadedCount: (posts === null || posts === void 0 ? void 0 : posts.length) || 0,
         postCountOnPage: totalCount || 0,
@@ -45,36 +46,36 @@ export const Feed = ({ image }) => {
     const pageChange = (value) => {
         dispatch({ type: ActionTypes.PageChange, payload: value });
     };
-    const setIsFetching = (value) => {
-        dispatch({ type: ActionTypes.SetIsFetching, payload: value });
-    };
-    const setErrorLoad = (value) => {
-        dispatch({ type: ActionTypes.SetErrorLoad, payload: value });
-    };
-    const handleChangeQueryParams = useCallback((value) => {
+    const handleChangeQueryParams = (value) => {
         dispatch({ type: ActionTypes.QueryParamsChange, payload: value });
         const hasFirstPageQuery = Object.keys(value).some((queryKey) => queryKey === PAGE_QUERY && value[queryKey] === FIRST_PAGE);
-        const result = hasFirstPageQuery
-            ? Object.assign(Object.assign({}, value), { [PAGE_QUERY]: null }) : Object.assign({}, value);
-        router.updateQueryCallback(result);
-    }, [router]);
-    const fetchData = useCallback(async ({ page, query }) => {
-        if (query && getPosts) {
-            const queryParamsForRequest = getFeedQueryParams(Object.assign(Object.assign({}, queryParams), query), page);
-            const data = await getPosts(queryParamsForRequest);
+        if (hasFirstPageQuery) {
+            // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
+            value[PAGE_QUERY] = null;
+        }
+        router.updateQueryCallback(value);
+    };
+    const handlePageChange = async (value) => {
+        pageChange(value);
+        handleChangeQueryParams({ page: value });
+    };
+    const fetchData = useCallback(async (pageNumber) => {
+        if (queryParams && getPosts) {
+            const query = getFeedQueryParams(queryParams, pageNumber);
+            const data = await getPosts(query);
             return data;
         }
         else {
             throw new Error('cant get request');
         }
     }, [getPosts, queryParams]);
-    const handleLoad = useCallback(async ({ page, query }) => {
-        const pageNumber = Number(page || queryParams.page || DEFAULT_PAGE);
-        handleChangeQueryParams(query);
+    const setIsFetching = (value) => {
+        dispatch({ type: ActionTypes.SetIsFetching, payload: value });
+    };
+    const fetchAndReplaceData = useCallback(async (pageNumber) => {
         try {
-            setErrorLoad(false);
-            setIsFetching(true);
-            const fetchedData = await fetchData({ page: pageNumber, query });
+            dispatch({ type: ActionTypes.SetErrorLoad, payload: false });
+            const fetchedData = await fetchData(pageNumber);
             if (fetchedData) {
                 dispatch({
                     type: ActionTypes.SetPosts,
@@ -88,35 +89,22 @@ export const Feed = ({ image }) => {
             }
         }
         catch (err) {
-            setErrorLoad(true);
+            dispatch({ type: ActionTypes.SetErrorLoad, payload: true });
         }
         scrollOnPageChange(CONTAINER_ID);
         setIsFetching(false);
-    }, [fetchData, handleChangeQueryParams, queryParams]);
-    const handlePageChange = async (value) => {
-        pageChange(value);
-        handleLoad({
-            page: value,
-            query: Object.assign(Object.assign({}, queryParams), { page: value }),
-        });
-    };
+    }, [fetchData]);
     const handleShowMore = async () => {
+        dispatch({ type: ActionTypes.SetIsShowMoreFetching, payload: true });
         /**
          * @deprecated Metrika will be deleted after launch of analyticsEvents
          */
         metrika.reachGoal(MetrikaCounter.CrossSite, BlogMetrikaGoalIds.showMore);
         handleAnalytics();
-        const nextPage = currentPage + 1;
         try {
-            setIsFetching(true);
-            const fetchedData = await fetchData({
-                page: nextPage,
-                query: {
-                    page: nextPage,
-                },
-            });
+            const fetchedData = await fetchData(currentPage + 1);
             handleChangeQueryParams({
-                page: nextPage,
+                page: currentPage + 1,
             });
             if (fetchedData) {
                 dispatch({
@@ -124,7 +112,7 @@ export const Feed = ({ image }) => {
                     payload: {
                         posts: (postsOnPage !== null && postsOnPage !== void 0 ? postsOnPage : []).concat(fetchedData.posts),
                         count: fetchedData.count,
-                        currentPage: nextPage,
+                        currentPage: currentPage + 1,
                         lastLoadedCount: fetchedData.posts.length,
                     },
                 });
@@ -133,11 +121,13 @@ export const Feed = ({ image }) => {
         catch (err) {
             dispatch({ type: ActionTypes.SetErrorShowMore, payload: true });
         }
-        setIsFetching(false);
+        dispatch({ type: ActionTypes.SetIsShowMoreFetching, payload: false });
     };
-    const handleOnErrorReload = useCallback(() => {
-        handleLoad({ page: currentPage, query: queryParams });
-    }, [currentPage, handleLoad, queryParams]);
+    useEffect(() => {
+        if (isFetching) {
+            fetchAndReplaceData(Number(queryParams.page || DEFAULT_PAGE));
+        }
+    }, [fetchAndReplaceData, isFetching, queryParams.page]);
     useEffect(() => {
         const loadedPostsCount = currentPage * perPageInQuery;
         dispatch({
@@ -155,10 +145,10 @@ export const Feed = ({ image }) => {
         icon: tag.icon && React.createElement(Icon, { data: tag.icon }),
     })), [tags]);
     return (React.createElement("div", null,
-        React.createElement(FeedHeader, { verticalOffset: "s", tags: tagItems, services: serviceItems, handleLoadData: handleLoad, queryParams: queryParams, background: {
+        React.createElement(FeedHeader, { verticalOffset: "s", tags: tagItems, services: serviceItems, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQueryParams, queryParams: queryParams, background: {
                 fullWidth: true,
                 url: image,
                 disableCompress: true,
             } }),
-        errorLoad ? (React.createElement(PostsError, { onButtonClick: handleOnErrorReload })) : (React.createElement(Posts, { containerId: CONTAINER_ID, currentPage: currentPage, isShowMoreVisible: isShowMoreVisible, errorShowMore: errorShowMore, postCountOnPage: postCountOnPage, perPageInQuery: perPageInQuery, handleShowMore: handleShowMore, handlePageChange: handlePageChange, postsOnPage: postsOnPage, pinnedPostOnPage: pinnedPostOnPage, isFetching: isFetching, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))));
+        errorLoad ? (React.createElement(PostsError, { onButtonClick: () => fetchAndReplaceData(Number(queryParams.page || DEFAULT_PAGE)) })) : (React.createElement(Posts, { containerId: CONTAINER_ID, currentPage: currentPage, isShowMoreVisible: isShowMoreVisible, errorShowMore: errorShowMore, postCountOnPage: postCountOnPage, perPageInQuery: perPageInQuery, handleShowMore: handleShowMore, handlePageChange: handlePageChange, postsOnPage: postsOnPage, pinnedPostOnPage: pinnedPostOnPage, isFetching: isFetching, isShowMoreFetching: isShowMoreFetching, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))));
 };

package/build/esm/blocks/Feed/reducer.d.ts

@@ -6,6 +6,7 @@ export declare enum ActionTypes {
     SetPosts = "setPosts",
     SetShowMore = "setShowMore",
     SetIsFetching = "setIsFetching",
+    SetIsShowMoreFetching = "setIsShowMoreFetching",
     PageChange = "pageChange",
     QueryParamsChange = "queryParamsChange"
 }
@@ -14,6 +15,7 @@ export type State = {
     errorLoad: boolean;
     errorShowMore: boolean;
     isFetching: boolean;
+    isShowMoreFetching: boolean;
     isShowMoreVisible: boolean;
     lastLoadedCount: number;
     pinnedPostOnPage?: PostData;
@@ -27,6 +29,9 @@ type Action = {
 } | {
     type: ActionTypes.SetIsFetching;
     payload: boolean;
+} | {
+    type: ActionTypes.SetIsShowMoreFetching;
+    payload: boolean;
 } | {
     type: ActionTypes.SetPosts;
     payload: {

package/build/esm/blocks/Feed/reducer.js

@@ -6,6 +6,7 @@ export var ActionTypes;
     ActionTypes["SetPosts"] = "setPosts";
     ActionTypes["SetShowMore"] = "setShowMore";
     ActionTypes["SetIsFetching"] = "setIsFetching";
+    ActionTypes["SetIsShowMoreFetching"] = "setIsShowMoreFetching";
     ActionTypes["PageChange"] = "pageChange";
     ActionTypes["QueryParamsChange"] = "queryParamsChange";
 })(ActionTypes || (ActionTypes = {}));
@@ -16,9 +17,11 @@ export const reducer = (state, { type, payload }) => {
         case ActionTypes.SetPosts:
             return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.count, postCountOnPage: payload.count, pinnedPostOnPage: payload.pinnedPost, postsOnPage: payload.posts, currentPage: payload.page });
         case ActionTypes.SetShowMore:
-            return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.lastLoadedCount, postCountOnPage: payload.count, currentPage: payload.currentPage, postsOnPage: payload.posts, errorShowMore: false });
+            return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.lastLoadedCount, postCountOnPage: payload.count, currentPage: payload.currentPage, postsOnPage: payload.posts, errorShowMore: false, isShowMoreFetching: true });
         case ActionTypes.SetIsFetching:
             return Object.assign(Object.assign({}, state), { isFetching: payload });
+        case ActionTypes.SetIsShowMoreFetching:
+            return Object.assign(Object.assign({}, state), { isShowMoreFetching: payload });
         case ActionTypes.PageChange:
             return Object.assign(Object.assign({}, state), { currentPage: payload, isFetching: true });
         case ActionTypes.SetErrorLoad:

package/build/esm/blocks/YFM/YFM.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { YFMWrapper } from '@gravity-ui/page-constructor';
 import block from 'bem-cn-lite';
+import { YFMWrapper } from '@gravity-ui/page-constructor';
 import { Wrapper } from '../../components/Wrapper/Wrapper';
 import { PaddingsDirections } from '../../models/paddings';
 const b = block('yfm');

package/build/esm/blocks/YFM/__tests__/YFM.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/esm/blocks/YFM/__tests__/YFM.test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { YFM } from '../YFM';
+const text = 'YFM block';
+describe('YFM', () => {
+    test('Has id', async () => {
+        render(React.createElement(YFM, { text: text }));
+        const yfm = screen.getByText(text);
+        expect(yfm).toHaveClass('yfm');
+    });
+});

package/build/esm/components/FeedHeader/FeedHeader.js

@@ -4,7 +4,7 @@ import { block } from '../../utils/cn';
 import { Controls } from './components/Controls/Controls';
 import './FeedHeader.css';
 const b = block('feed-header');
-export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, queryParams, }) => {
+export const FeedHeader = ({ tags, services, setIsFetching, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, handleChangeQuery, queryParams, }) => {
     const backgroundThemed = background && getThemedValue(background, theme);
     return (React.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
         (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (React.createElement(FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,
@@ -14,5 +14,5 @@ export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default',
                         ? ''
                         : backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color,
                 }, disableCompress: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.disableCompress })) : null,
-            React.createElement(Controls, { tags: tags, services: services, handleLoadData: handleLoadData, queryParams: queryParams }))));
+            React.createElement(Controls, { tags: tags, services: services, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQuery, queryParams: queryParams }))));
 };

package/build/esm/components/FeedHeader/components/Controls/Controls.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { FetchArgs, Query, SetQueryType } from '../../../../models/common';
+import { HandleChangeQueryParams, Query, SetQueryType } from '../../../../models/common';
 import './Controls.css';
 export type SelectItem = {
     content: string;
@@ -7,9 +7,10 @@ export type SelectItem = {
     icon?: ReactNode;
 };
 export type ControlsProps = {
-    handleLoadData: (props: FetchArgs) => void;
+    setIsFetching: (value: boolean) => void;
     tags?: SelectItem[];
     services?: SelectItem[];
+    handleChangeQuery: HandleChangeQueryParams;
     queryParams: Query;
     setQuery?: SetQueryType;
 };

package/build/esm/components/FeedHeader/components/Controls/Controls.js

@@ -10,7 +10,7 @@ import metrika from '../../../../counters/metrika.js';
 import { MetrikaCounter } from '../../../../counters/utils';
 import { Keyset, i18 } from '../../../../i18n';
 import { Save } from '../../../../icons/Save';
-import { DefaultEventNames } from '../../../../models/common';
+import { DefaultEventNames, } from '../../../../models/common';
 import { block } from '../../../../utils/cn';
 import { Search } from '../../../Search/Search';
 import { renderFilter, renderOption, renderSwitcher } from './customRenders';
@@ -19,7 +19,7 @@ const b = block('feed-controls');
 const ICON_SIZE = 16;
 const DEFAULT_PAGE = 1;
 const VIRTUALIZATION_THRESHOLD = 1000;
-export const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) => {
+export const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery, queryParams, }) => {
     const { hasLikes } = useContext(LikesContext);
     const handleAnalyticsTag = useAnalytics(DefaultEventNames.Tag);
     const handleAnalyticsService = useAnalytics(DefaultEventNames.Service);
@@ -28,25 +28,21 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
     const [savedOnly, setSavedOnly] = useState(savedOnlyInitial === 'true');
     const [search, setSearch] = useState(searchInitial);
     const handleSavedOnly = () => {
-        handleAnalyticsSaveOnly();
-        setSavedOnly(!savedOnly);
-        handleLoadData({
+        handleChangeQuery({
+            savedOnly: savedOnly ? '' : 'true',
+            search: '',
+            tags: '',
             page: DEFAULT_PAGE,
-            query: {
-                savedOnly: savedOnly ? '' : 'true',
-                search: '',
-                tags: '',
-                page: DEFAULT_PAGE,
-                services: '',
-            },
+            services: '',
         });
+        handleAnalyticsSaveOnly();
+        setSavedOnly(!savedOnly);
+        setIsFetching(true);
     };
     const handleSearch = (searchValue) => {
+        handleChangeQuery({ search: searchValue, page: DEFAULT_PAGE });
         setSearch(searchValue);
-        handleLoadData({
-            page: DEFAULT_PAGE,
-            query: { search: searchValue, page: DEFAULT_PAGE },
-        });
+        setIsFetching(true);
     };
     const handleTagSelect = (selectedTags) => {
         /**
@@ -59,13 +55,11 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
             theme: selectedTags[0],
         });
         const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
-        handleLoadData({
+        handleChangeQuery({
+            tags: isEmptyTag ? '' : selectedTags[0],
             page: DEFAULT_PAGE,
-            query: {
-                tags: isEmptyTag ? '' : selectedTags[0],
-                page: DEFAULT_PAGE,
-            },
         });
+        setIsFetching(true);
     };
     const handleServicesSelect = (selectedServices) => {
         const forMetrikaServices = services.filter((service) => {
@@ -82,10 +76,8 @@ export const Controls = ({ handleLoadData, tags = [], services = [], queryParams
             service: metrikaAsString,
         });
         const servicesAsString = selectedServices.join(',');
-        handleLoadData({
-            page: DEFAULT_PAGE,
-            query: { services: servicesAsString, page: DEFAULT_PAGE },
-        });
+        handleChangeQuery({ services: servicesAsString, page: DEFAULT_PAGE });
+        setIsFetching(true);
     };
     const tagsItems = useMemo(() => [{ value: 'empty', content: i18(Keyset.AllTags) }, ...tags], [tags]);
     const servicesItems = useMemo(() => (servicesInitial ? [...servicesInitial.split(',')] : []), [servicesInitial]);

package/build/esm/components/Paginator/Paginator.d.ts

@@ -1,3 +1,3 @@
 import { PaginatorProps } from './types';
 import './Paginator.css';
-export declare const Paginator: ({ itemsPerPage, totalItems, maxPages, page, className, onPageChange, pageCountForShowSupportButtons, }: PaginatorProps) => JSX.Element | null;
+export declare const Paginator: ({ itemsPerPage, totalItems, maxPages, page, className, loading, onPageChange, pageCountForShowSupportButtons, }: PaginatorProps) => JSX.Element | null;

package/build/esm/components/Paginator/Paginator.js

@@ -26,7 +26,7 @@ import { getPageConfigs, getPagesCount } from './utils';
 import './Paginator.css';
 const b = block('paginator');
 const DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS = 6;
-export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
+export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, loading, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
     const [pagesCount, setPagesCount] = useState(getPagesCount({ itemsPerPage, totalItems, maxPages }));
     useEffect(() => {
         const count = getPagesCount({ itemsPerPage, totalItems, maxPages });
@@ -95,7 +95,7 @@ export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className,
     }
     const renderPaginatorItem = (item) => {
         const { key } = item, rest = __rest(item, ["key"]);
-        return React.createElement(PaginatorItem, Object.assign({ key: `page_${key}` }, rest));
+        return React.createElement(PaginatorItem, Object.assign({ key: `page_${key}` }, rest, { loading: loading }));
     };
     return (React.createElement("div", { className: b('pagination') },
         page > 1 && (React.createElement("div", { className: b('pagination-block') },

package/build/esm/components/Paginator/types.d.ts

@@ -15,6 +15,7 @@ export type PaginatorProps = {
     totalItems: number;
     itemsPerPage: number;
     maxPages: number;
+    loading: boolean;
     onPageChange: (page: number) => void;
     pageCountForShowSupportButtons?: number;
 } & ClassNameProps;

package/build/esm/components/Posts/Posts.css

@@ -1,15 +1,9 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.bc-posts {
-  position: relative;
-}
 .bc-posts__cards-container, .bc-posts__pinned-container {
   padding-top: 24px;
   scroll-margin: 48px;
 }
-.bc-posts__cards-container_isLoading {
-  opacity: 0.7;
-}
 .bc-posts__pagination {
   display: flex;
   flex-direction: column;
@@ -31,23 +25,4 @@ unpredictable css rules order in build */
 }
 .bc-posts__paginator {
   padding-top: 12px;
-}
-.bc-posts__loaderContainer {
-  z-index: 6;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 70%;
-  height: 100%;
-  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
-  animation: shimmer 2s infinite linear;
-}
-
-@keyframes shimmer {
-  from {
-    transform: translateX(-200%);
-  }
-  to {
-    transform: translateX(300%);
-  }
 }

package/build/esm/components/Posts/Posts.d.ts

@@ -9,6 +9,7 @@ type PostCardProps = {
     postCountOnPage: number;
     perPageInQuery: number;
     isFetching: boolean;
+    isShowMoreFetching: boolean;
     handleShowMore: (value?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void> | void;
     handlePageChange: (value: number) => Promise<void> | void;
     postsOnPage?: PostData[];