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

package/CHANGELOG.md

@@ -1,12 +1,5 @@
 # Changelog
 
-## [3.3.0](https://github.com/gravity-ui/blog-constructor/compare/v3.2.1...v3.3.0) (2023-05-16)
-
-
-### Features
-
-* add md breackpoint to cta-block ([#45](https://github.com/gravity-ui/blog-constructor/issues/45)) ([e859b0b](https://github.com/gravity-ui/blog-constructor/commit/e859b0b02e80b20eb0b4496e2c4834fb2de74922))
-
 ## [3.2.1](https://github.com/gravity-ui/blog-constructor/compare/v3.2.0...v3.2.1) (2023-05-16)
 
 

package/build/cjs/blocks/CTA/CTA.css

@@ -8,27 +8,49 @@
   flex-direction: column;
   flex-grow: 1;
   padding: 32px;
-  width: calc(33.3333333333% - (32px / 2));
+}
+.bc-cta__button {
+  display: flex;
+  padding-bottom: 16px;
 }
 .bc-cta__content {
   display: flex;
-  flex-flow: row wrap;
-  gap: 16px;
+  flex-direction: column;
 }
-@media (max-width: 769px) {
+@media (min-width: 577px) {
   .bc-cta__content {
-    flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
   }
-  .bc-cta__card {
-    width: calc((100% / 2) - 16px);
-    flex-grow: 1;
-  }
-}
-@media (max-width: 577px) {
-  .bc-cta__content {
-    flex-direction: column;
+  .bc-cta__button {
+    padding-bottom: 0px;
   }
-  .bc-cta__card {
+  .bc-cta__button_layout {
     width: 100%;
+    max-width: 100%;
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_2 {
+    width: calc(50% - (16px / 2));
+    max-width: 50%;
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_2:nth-child(2n) {
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_3 {
+    width: calc(33.3333333333% - (32px / 3));
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_3:nth-child(3n) {
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_4 {
+    width: calc(25% - (48px / 4));
+    max-width: 50%;
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_4:nth-child(4n) {
+    margin-right: 0px;
   }
 }

package/build/cjs/blocks/CTA/CTA.js

@@ -12,7 +12,15 @@ const paddings_1 = require("../../models/paddings");
 const cn_1 = require("../../utils/cn");
 const common_1 = require("../../utils/common");
 const b = (0, cn_1.block)('cta');
+const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
 const CTA = ({ items, paddingTop, paddingBottom }) => {
+    let count = items ? items.length : DEFAULT_COLUMN_COUNT;
+    if (count < MIN_COLUMN_COUNT) {
+        count = MIN_COLUMN_COUNT;
+    }
+    else if (count > MAX_COLUMN_COUNT) {
+        count = MAX_COLUMN_COUNT;
+    }
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
@@ -23,15 +31,18 @@ const CTA = ({ items, paddingTop, paddingBottom }) => {
     return (react_1.default.createElement(Wrapper_1.Wrapper, { paddings: {
             [paddings_1.PaddingsDirections.top]: paddingTop,
             [paddings_1.PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
+        }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
         var _a;
         const contentData = (0, common_1.updateContentSizes)(content);
         (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
             // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
             link.metrikaGoals = (0, common_1.getBlogElementMetrika)(metrikaGoal, link.metrikaGoals);
         });
-        return (react_1.default.createElement("div", { key: index, className: b('card'), "data-qa": "blog-cta-card" },
-            react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData))));
+        return (react_1.default.createElement("div", { key: index, className: b('button', {
+                ['layout']: count,
+            }), "data-qa": "blog-cta-card" },
+            react_1.default.createElement("div", { className: b('card') },
+                react_1.default.createElement(page_constructor_1.Content, Object.assign({}, contentData)))));
     })));
 };
 exports.CTA = CTA;

package/build/cjs/blocks/Feed/Feed.js

@@ -56,11 +56,10 @@ const Feed = ({ image }) => {
     const { posts, totalCount, tags, services, pinnedPost, getPosts, pageCountForShowSupportButtons, } = (0, react_1.useContext)(FeedContext_1.FeedContext);
     const router = (0, react_1.useContext)(RouterContext_1.RouterContext);
     const handleAnalytics = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.ShowMore);
-    const [{ errorLoad, errorShowMore, isFetching, isShowMoreFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = (0, react_1.useReducer)(reducer_1.reducer, {
+    const [{ errorLoad, errorShowMore, isFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = (0, react_1.useReducer)(reducer_1.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,
@@ -75,36 +74,36 @@ const Feed = ({ image }) => {
     const pageChange = (value) => {
         dispatch({ type: reducer_1.ActionTypes.PageChange, payload: value });
     };
-    const handleChangeQueryParams = (value) => {
-        dispatch({ type: reducer_1.ActionTypes.QueryParamsChange, payload: value });
-        const hasFirstPageQuery = Object.keys(value).some((queryKey) => queryKey === PAGE_QUERY && value[queryKey] === FIRST_PAGE);
-        if (hasFirstPageQuery) {
-            // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
-            value[PAGE_QUERY] = null;
-        }
-        router.updateQueryCallback(value);
+    const setIsFetching = (value) => {
+        dispatch({ type: reducer_1.ActionTypes.SetIsFetching, payload: value });
     };
-    const handlePageChange = async (value) => {
-        pageChange(value);
-        handleChangeQueryParams({ page: value });
+    const setErrorLoad = (value) => {
+        dispatch({ type: reducer_1.ActionTypes.SetErrorLoad, payload: value });
     };
-    const fetchData = (0, react_1.useCallback)(async (pageNumber) => {
-        if (queryParams && getPosts) {
-            const query = (0, common_2.getFeedQueryParams)(queryParams, pageNumber);
-            const data = await getPosts(query);
+    const handleChangeQueryParams = (0, react_1.useCallback)((value) => {
+        dispatch({ type: reducer_1.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 = (0, react_1.useCallback)(async ({ page, query }) => {
+        if (query && getPosts) {
+            const queryParamsForRequest = (0, common_2.getFeedQueryParams)(Object.assign(Object.assign({}, queryParams), query), page);
+            const data = await getPosts(queryParamsForRequest);
             return data;
         }
         else {
             throw new Error('cant get request');
         }
     }, [getPosts, queryParams]);
-    const setIsFetching = (value) => {
-        dispatch({ type: reducer_1.ActionTypes.SetIsFetching, payload: value });
-    };
-    const fetchAndReplaceData = (0, react_1.useCallback)(async (pageNumber) => {
+    const handleLoad = (0, react_1.useCallback)(async ({ page, query }) => {
+        const pageNumber = Number(page || queryParams.page || constants_2.DEFAULT_PAGE);
+        handleChangeQueryParams(query);
         try {
-            dispatch({ type: reducer_1.ActionTypes.SetErrorLoad, payload: false });
-            const fetchedData = await fetchData(pageNumber);
+            setErrorLoad(false);
+            setIsFetching(true);
+            const fetchedData = await fetchData({ page: pageNumber, query });
             if (fetchedData) {
                 dispatch({
                     type: reducer_1.ActionTypes.SetPosts,
@@ -118,22 +117,35 @@ const Feed = ({ image }) => {
             }
         }
         catch (err) {
-            dispatch({ type: reducer_1.ActionTypes.SetErrorLoad, payload: true });
+            setErrorLoad(true);
         }
         (0, common_2.scrollOnPageChange)(CONTAINER_ID);
         setIsFetching(false);
-    }, [fetchData]);
+    }, [fetchData, handleChangeQueryParams, queryParams]);
+    const handlePageChange = async (value) => {
+        pageChange(value);
+        handleLoad({
+            page: value,
+            query: Object.assign(Object.assign({}, queryParams), { page: value }),
+        });
+    };
     const handleShowMore = async () => {
-        dispatch({ type: reducer_1.ActionTypes.SetIsShowMoreFetching, payload: true });
         /**
          * @deprecated Metrika will be deleted after launch of analyticsEvents
          */
         metrika_js_1.default.reachGoal(utils_1.MetrikaCounter.CrossSite, constants_1.BlogMetrikaGoalIds.showMore);
         handleAnalytics();
+        const nextPage = currentPage + 1;
         try {
-            const fetchedData = await fetchData(currentPage + 1);
+            setIsFetching(true);
+            const fetchedData = await fetchData({
+                page: nextPage,
+                query: {
+                    page: nextPage,
+                },
+            });
             handleChangeQueryParams({
-                page: currentPage + 1,
+                page: nextPage,
             });
             if (fetchedData) {
                 dispatch({
@@ -141,7 +153,7 @@ const Feed = ({ image }) => {
                     payload: {
                         posts: (postsOnPage !== null && postsOnPage !== void 0 ? postsOnPage : []).concat(fetchedData.posts),
                         count: fetchedData.count,
-                        currentPage: currentPage + 1,
+                        currentPage: nextPage,
                         lastLoadedCount: fetchedData.posts.length,
                     },
                 });
@@ -150,13 +162,11 @@ const Feed = ({ image }) => {
         catch (err) {
             dispatch({ type: reducer_1.ActionTypes.SetErrorShowMore, payload: true });
         }
-        dispatch({ type: reducer_1.ActionTypes.SetIsShowMoreFetching, payload: false });
+        setIsFetching(false);
     };
-    (0, react_1.useEffect)(() => {
-        if (isFetching) {
-            fetchAndReplaceData(Number(queryParams.page || constants_2.DEFAULT_PAGE));
-        }
-    }, [fetchAndReplaceData, isFetching, queryParams.page]);
+    const handleOnErrorReload = (0, react_1.useCallback)(() => {
+        handleLoad({ page: currentPage, query: queryParams });
+    }, [currentPage, handleLoad, queryParams]);
     (0, react_1.useEffect)(() => {
         const loadedPostsCount = currentPage * perPageInQuery;
         dispatch({
@@ -174,11 +184,11 @@ const Feed = ({ image }) => {
         icon: tag.icon && react_1.default.createElement(uikit_1.Icon, { data: tag.icon }),
     })), [tags]);
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(FeedHeader_1.FeedHeader, { verticalOffset: "s", tags: tagItems, services: serviceItems, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQueryParams, queryParams: queryParams, background: {
+        react_1.default.createElement(FeedHeader_1.FeedHeader, { verticalOffset: "s", tags: tagItems, services: serviceItems, handleLoadData: handleLoad, queryParams: queryParams, background: {
                 fullWidth: true,
                 url: image,
                 disableCompress: true,
             } }),
-        errorLoad ? (react_1.default.createElement(PostsError_1.PostsError, { onButtonClick: () => fetchAndReplaceData(Number(queryParams.page || constants_2.DEFAULT_PAGE)) })) : (react_1.default.createElement(Posts_1.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 }))));
+        errorLoad ? (react_1.default.createElement(PostsError_1.PostsError, { onButtonClick: handleOnErrorReload })) : (react_1.default.createElement(Posts_1.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 }))));
 };
 exports.Feed = Feed;

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

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

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

@@ -9,7 +9,6 @@ var ActionTypes;
     ActionTypes["SetPosts"] = "setPosts";
     ActionTypes["SetShowMore"] = "setShowMore";
     ActionTypes["SetIsFetching"] = "setIsFetching";
-    ActionTypes["SetIsShowMoreFetching"] = "setIsShowMoreFetching";
     ActionTypes["PageChange"] = "pageChange";
     ActionTypes["QueryParamsChange"] = "queryParamsChange";
 })(ActionTypes = exports.ActionTypes || (exports.ActionTypes = {}));
@@ -20,11 +19,9 @@ 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, isShowMoreFetching: true });
+            return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.lastLoadedCount, postCountOnPage: payload.count, currentPage: payload.currentPage, postsOnPage: payload.posts, errorShowMore: false });
         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/cjs/components/FeedHeader/FeedHeader.js

@@ -9,7 +9,7 @@ const page_constructor_1 = require("@gravity-ui/page-constructor");
 const cn_1 = require("../../utils/cn");
 const Controls_1 = require("./components/Controls/Controls");
 const b = (0, cn_1.block)('feed-header');
-const FeedHeader = ({ tags, services, setIsFetching, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, handleChangeQuery, queryParams, }) => {
+const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, queryParams, }) => {
     const backgroundThemed = background && (0, page_constructor_1.getThemedValue)(background, theme);
     return (react_1.default.createElement("header", { className: b('header', { ['has-background']: Boolean(background) }, className) },
         (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color) ? (react_1.default.createElement(page_constructor_1.FullWidthBackground, { style: { backgroundColor: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color }, theme: "rounded" })) : null,
@@ -19,6 +19,6 @@ const FeedHeader = ({ tags, services, setIsFetching, offset = 'default', backgro
                         ? ''
                         : backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.color,
                 }, disableCompress: backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.disableCompress })) : null,
-            react_1.default.createElement(Controls_1.Controls, { tags: tags, services: services, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQuery, queryParams: queryParams }))));
+            react_1.default.createElement(Controls_1.Controls, { tags: tags, services: services, handleLoadData: handleLoadData, queryParams: queryParams }))));
 };
 exports.FeedHeader = FeedHeader;

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

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

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

@@ -47,7 +47,7 @@ const b = (0, cn_1.block)('feed-controls');
 const ICON_SIZE = 16;
 const DEFAULT_PAGE = 1;
 const VIRTUALIZATION_THRESHOLD = 1000;
-const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery, queryParams, }) => {
+const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) => {
     const { hasLikes } = (0, react_1.useContext)(LikesContext_1.LikesContext);
     const handleAnalyticsTag = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.Tag);
     const handleAnalyticsService = (0, page_constructor_1.useAnalytics)(common_1.DefaultEventNames.Service);
@@ -56,21 +56,25 @@ const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery,
     const [savedOnly, setSavedOnly] = (0, react_1.useState)(savedOnlyInitial === 'true');
     const [search, setSearch] = (0, react_1.useState)(searchInitial);
     const handleSavedOnly = () => {
-        handleChangeQuery({
-            savedOnly: savedOnly ? '' : 'true',
-            search: '',
-            tags: '',
-            page: DEFAULT_PAGE,
-            services: '',
-        });
         handleAnalyticsSaveOnly();
         setSavedOnly(!savedOnly);
-        setIsFetching(true);
+        handleLoadData({
+            page: DEFAULT_PAGE,
+            query: {
+                savedOnly: savedOnly ? '' : 'true',
+                search: '',
+                tags: '',
+                page: DEFAULT_PAGE,
+                services: '',
+            },
+        });
     };
     const handleSearch = (searchValue) => {
-        handleChangeQuery({ search: searchValue, page: DEFAULT_PAGE });
         setSearch(searchValue);
-        setIsFetching(true);
+        handleLoadData({
+            page: DEFAULT_PAGE,
+            query: { search: searchValue, page: DEFAULT_PAGE },
+        });
     };
     const handleTagSelect = (selectedTags) => {
         /**
@@ -83,11 +87,13 @@ const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery,
             theme: selectedTags[0],
         });
         const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
-        handleChangeQuery({
-            tags: isEmptyTag ? '' : selectedTags[0],
+        handleLoadData({
             page: DEFAULT_PAGE,
+            query: {
+                tags: isEmptyTag ? '' : selectedTags[0],
+                page: DEFAULT_PAGE,
+            },
         });
-        setIsFetching(true);
     };
     const handleServicesSelect = (selectedServices) => {
         const forMetrikaServices = services.filter((service) => {
@@ -104,8 +110,10 @@ const Controls = ({ setIsFetching, tags = [], services = [], handleChangeQuery,
             service: metrikaAsString,
         });
         const servicesAsString = selectedServices.join(',');
-        handleChangeQuery({ services: servicesAsString, page: DEFAULT_PAGE });
-        setIsFetching(true);
+        handleLoadData({
+            page: DEFAULT_PAGE,
+            query: { services: servicesAsString, page: DEFAULT_PAGE },
+        });
     };
     const tagsItems = (0, react_1.useMemo)(() => [{ value: 'empty', content: (0, i18n_1.i18)(i18n_1.Keyset.AllTags) }, ...tags], [tags]);
     const servicesItems = (0, react_1.useMemo)(() => (servicesInitial ? [...servicesInitial.split(',')] : []), [servicesInitial]);

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

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

package/build/cjs/components/Paginator/Paginator.js

@@ -54,7 +54,7 @@ const types_1 = require("./types");
 const utils_2 = require("./utils");
 const b = (0, cn_1.block)('paginator');
 const DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS = 6;
-const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, loading, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
+const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
     const [pagesCount, setPagesCount] = (0, react_1.useState)((0, utils_2.getPagesCount)({ itemsPerPage, totalItems, maxPages }));
     (0, react_1.useEffect)(() => {
         const count = (0, utils_2.getPagesCount)({ itemsPerPage, totalItems, maxPages });
@@ -123,7 +123,7 @@ const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, loadin
     }
     const renderPaginatorItem = (item) => {
         const { key } = item, rest = __rest(item, ["key"]);
-        return react_1.default.createElement(PaginatorItem_1.PaginatorItem, Object.assign({ key: `page_${key}` }, rest, { loading: loading }));
+        return react_1.default.createElement(PaginatorItem_1.PaginatorItem, Object.assign({ key: `page_${key}` }, rest));
     };
     return (react_1.default.createElement("div", { className: b('pagination') },
         page > 1 && (react_1.default.createElement("div", { className: b('pagination-block') },

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

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

package/build/cjs/components/Posts/Posts.css

@@ -1,9 +1,15 @@
 /* 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;
@@ -25,4 +31,23 @@ 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/cjs/components/Posts/Posts.d.ts

@@ -8,7 +8,6 @@ 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[];

package/build/cjs/components/Posts/Posts.js

@@ -13,8 +13,9 @@ const Paginator_1 = require("../Paginator/Paginator");
 const PostCard_1 = require("../PostCard/PostCard");
 const PostsEmpty_1 = require("../PostsEmpty/PostsEmpty");
 const b = (0, cn_1.block)('posts');
-const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, isShowMoreFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }) => (react_1.default.createElement("div", { className: b() },
-    react_1.default.createElement("div", { id: containerId, className: b('cards-container') },
+const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }) => (react_1.default.createElement("div", { className: b() },
+    isFetching && react_1.default.createElement("div", { className: b('loaderContainer') }),
+    react_1.default.createElement("div", { id: containerId, className: b('cards-container', { isLoading: isFetching }) },
         pinnedPostOnPage && currentPage === 1 && (react_1.default.createElement("div", { className: b('pinned-container') },
             react_1.default.createElement(PostCard_1.PostCard, { post: pinnedPostOnPage, size: "m", fullWidth: true, showTag: true }))),
         (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length) ? (react_1.default.createElement(page_constructor_1.CardLayoutBlock, { title: '', colSizes: {
@@ -23,10 +24,10 @@ const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShow
                 md: 6,
             } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (react_1.default.createElement(PostCard_1.PostCard, { key: post.id, post: post, showTag: true }))))) : (react_1.default.createElement(PostsEmpty_1.PostsEmpty, null))),
     react_1.default.createElement("div", { className: b('pagination') },
-        Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore, loading: isShowMoreFetching }, (0, i18n_1.i18)(i18n_1.Keyset.ActionLoadMore))),
+        Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (react_1.default.createElement(uikit_1.Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore }, (0, i18n_1.i18)(i18n_1.Keyset.ActionLoadMore))),
         errorShowMore && (react_1.default.createElement("div", { className: b('error-show-more') },
             react_1.default.createElement("div", null, (0, i18n_1.i18)(i18n_1.Keyset.ErrorTitle)),
             react_1.default.createElement("div", null, (0, i18n_1.i18)(i18n_1.Keyset.PostLoadError)))),
         Boolean(currentPage && postCountOnPage) && (react_1.default.createElement("div", { className: b('paginator') },
-            react_1.default.createElement(Paginator_1.Paginator, { onPageChange: handlePageChange, page: currentPage, totalItems: postCountOnPage, itemsPerPage: perPageInQuery, loading: isFetching, maxPages: Infinity, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))))));
+            react_1.default.createElement(Paginator_1.Paginator, { onPageChange: handlePageChange, page: currentPage, totalItems: postCountOnPage, itemsPerPage: perPageInQuery, maxPages: Infinity, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))))));
 exports.Posts = Posts;

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

@@ -161,3 +161,7 @@ export declare enum DefaultEventNames {
     Service = "selector-service-click",
     SaveOnly = "save-only-button-click"
 }
+export type FetchArgs = {
+    page?: number;
+    query: Query;
+};

package/build/esm/blocks/CTA/CTA.css

@@ -8,27 +8,49 @@
   flex-direction: column;
   flex-grow: 1;
   padding: 32px;
-  width: calc(33.3333333333% - (32px / 2));
+}
+.bc-cta__button {
+  display: flex;
+  padding-bottom: 16px;
 }
 .bc-cta__content {
   display: flex;
-  flex-flow: row wrap;
-  gap: 16px;
+  flex-direction: column;
 }
-@media (max-width: 769px) {
+@media (min-width: 577px) {
   .bc-cta__content {
-    flex-wrap: wrap;
+    display: flex;
+    flex-direction: row;
   }
-  .bc-cta__card {
-    width: calc((100% / 2) - 16px);
-    flex-grow: 1;
-  }
-}
-@media (max-width: 577px) {
-  .bc-cta__content {
-    flex-direction: column;
+  .bc-cta__button {
+    padding-bottom: 0px;
   }
-  .bc-cta__card {
+  .bc-cta__button_layout {
     width: 100%;
+    max-width: 100%;
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_2 {
+    width: calc(50% - (16px / 2));
+    max-width: 50%;
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_2:nth-child(2n) {
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_3 {
+    width: calc(33.3333333333% - (32px / 3));
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_3:nth-child(3n) {
+    margin-right: 0px;
+  }
+  .bc-cta__button_layout_4 {
+    width: calc(25% - (48px / 4));
+    max-width: 50%;
+    margin-right: 16px;
+  }
+  .bc-cta__button_layout_4:nth-child(4n) {
+    margin-right: 0px;
   }
 }

package/build/esm/blocks/CTA/CTA.js

@@ -7,7 +7,15 @@ import { block } from '../../utils/cn';
 import { getBlogElementMetrika, updateContentSizes } from '../../utils/common';
 import './CTA.css';
 const b = block('cta');
+const MAX_COLUMN_COUNT = 4, MIN_COLUMN_COUNT = 2, DEFAULT_COLUMN_COUNT = 3;
 export const CTA = ({ items, paddingTop, paddingBottom }) => {
+    let count = items ? items.length : DEFAULT_COLUMN_COUNT;
+    if (count < MIN_COLUMN_COUNT) {
+        count = MIN_COLUMN_COUNT;
+    }
+    else if (count > MAX_COLUMN_COUNT) {
+        count = MAX_COLUMN_COUNT;
+    }
     /**
      * @deprecated Metrika will be deleted after launch of analyticsEvents
      */
@@ -18,14 +26,17 @@ export const CTA = ({ items, paddingTop, paddingBottom }) => {
     return (React.createElement(Wrapper, { paddings: {
             [PaddingsDirections.top]: paddingTop,
             [PaddingsDirections.bottom]: paddingBottom,
-        }, className: b('content'), dataQa: "blog-cta-content" }, items.map((content, index) => {
+        }, className: b('content'), dataQa: "blog-cta-content" }, items.slice(0, count).map((content, index) => {
         var _a;
         const contentData = updateContentSizes(content);
         (_a = contentData.links) === null || _a === void 0 ? void 0 : _a.forEach((link) => {
             // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
             link.metrikaGoals = getBlogElementMetrika(metrikaGoal, link.metrikaGoals);
         });
-        return (React.createElement("div", { key: index, className: b('card'), "data-qa": "blog-cta-card" },
-            React.createElement(Content, Object.assign({}, contentData))));
+        return (React.createElement("div", { key: index, className: b('button', {
+                ['layout']: count,
+            }), "data-qa": "blog-cta-card" },
+            React.createElement("div", { className: b('card') },
+                React.createElement(Content, Object.assign({}, contentData)))));
     })));
 };

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

@@ -27,11 +27,10 @@ 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, isShowMoreFetching, isShowMoreVisible, lastLoadedCount, postCountOnPage, postsOnPage, pinnedPostOnPage, currentPage, queryParams, }, dispatch,] = useReducer(reducer, {
+    const [{ errorLoad, errorShowMore, isFetching, 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,
@@ -46,36 +45,36 @@ export const Feed = ({ image }) => {
     const pageChange = (value) => {
         dispatch({ type: ActionTypes.PageChange, payload: value });
     };
-    const handleChangeQueryParams = (value) => {
-        dispatch({ type: ActionTypes.QueryParamsChange, payload: value });
-        const hasFirstPageQuery = Object.keys(value).some((queryKey) => queryKey === PAGE_QUERY && value[queryKey] === FIRST_PAGE);
-        if (hasFirstPageQuery) {
-            // eslint-disable-next-line no-not-accumulator-reassign/no-not-accumulator-reassign
-            value[PAGE_QUERY] = null;
-        }
-        router.updateQueryCallback(value);
+    const setIsFetching = (value) => {
+        dispatch({ type: ActionTypes.SetIsFetching, payload: value });
     };
-    const handlePageChange = async (value) => {
-        pageChange(value);
-        handleChangeQueryParams({ page: value });
+    const setErrorLoad = (value) => {
+        dispatch({ type: ActionTypes.SetErrorLoad, payload: value });
     };
-    const fetchData = useCallback(async (pageNumber) => {
-        if (queryParams && getPosts) {
-            const query = getFeedQueryParams(queryParams, pageNumber);
-            const data = await getPosts(query);
+    const handleChangeQueryParams = useCallback((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);
             return data;
         }
         else {
             throw new Error('cant get request');
         }
     }, [getPosts, queryParams]);
-    const setIsFetching = (value) => {
-        dispatch({ type: ActionTypes.SetIsFetching, payload: value });
-    };
-    const fetchAndReplaceData = useCallback(async (pageNumber) => {
+    const handleLoad = useCallback(async ({ page, query }) => {
+        const pageNumber = Number(page || queryParams.page || DEFAULT_PAGE);
+        handleChangeQueryParams(query);
         try {
-            dispatch({ type: ActionTypes.SetErrorLoad, payload: false });
-            const fetchedData = await fetchData(pageNumber);
+            setErrorLoad(false);
+            setIsFetching(true);
+            const fetchedData = await fetchData({ page: pageNumber, query });
             if (fetchedData) {
                 dispatch({
                     type: ActionTypes.SetPosts,
@@ -89,22 +88,35 @@ export const Feed = ({ image }) => {
             }
         }
         catch (err) {
-            dispatch({ type: ActionTypes.SetErrorLoad, payload: true });
+            setErrorLoad(true);
         }
         scrollOnPageChange(CONTAINER_ID);
         setIsFetching(false);
-    }, [fetchData]);
+    }, [fetchData, handleChangeQueryParams, queryParams]);
+    const handlePageChange = async (value) => {
+        pageChange(value);
+        handleLoad({
+            page: value,
+            query: Object.assign(Object.assign({}, queryParams), { page: value }),
+        });
+    };
     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 {
-            const fetchedData = await fetchData(currentPage + 1);
+            setIsFetching(true);
+            const fetchedData = await fetchData({
+                page: nextPage,
+                query: {
+                    page: nextPage,
+                },
+            });
             handleChangeQueryParams({
-                page: currentPage + 1,
+                page: nextPage,
             });
             if (fetchedData) {
                 dispatch({
@@ -112,7 +124,7 @@ export const Feed = ({ image }) => {
                     payload: {
                         posts: (postsOnPage !== null && postsOnPage !== void 0 ? postsOnPage : []).concat(fetchedData.posts),
                         count: fetchedData.count,
-                        currentPage: currentPage + 1,
+                        currentPage: nextPage,
                         lastLoadedCount: fetchedData.posts.length,
                     },
                 });
@@ -121,13 +133,11 @@ export const Feed = ({ image }) => {
         catch (err) {
             dispatch({ type: ActionTypes.SetErrorShowMore, payload: true });
         }
-        dispatch({ type: ActionTypes.SetIsShowMoreFetching, payload: false });
+        setIsFetching(false);
     };
-    useEffect(() => {
-        if (isFetching) {
-            fetchAndReplaceData(Number(queryParams.page || DEFAULT_PAGE));
-        }
-    }, [fetchAndReplaceData, isFetching, queryParams.page]);
+    const handleOnErrorReload = useCallback(() => {
+        handleLoad({ page: currentPage, query: queryParams });
+    }, [currentPage, handleLoad, queryParams]);
     useEffect(() => {
         const loadedPostsCount = currentPage * perPageInQuery;
         dispatch({
@@ -145,10 +155,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, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQueryParams, queryParams: queryParams, background: {
+        React.createElement(FeedHeader, { verticalOffset: "s", tags: tagItems, services: serviceItems, handleLoadData: handleLoad, queryParams: queryParams, background: {
                 fullWidth: true,
                 url: image,
                 disableCompress: true,
             } }),
-        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 }))));
+        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 }))));
 };

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

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

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

@@ -6,7 +6,6 @@ export var ActionTypes;
     ActionTypes["SetPosts"] = "setPosts";
     ActionTypes["SetShowMore"] = "setShowMore";
     ActionTypes["SetIsFetching"] = "setIsFetching";
-    ActionTypes["SetIsShowMoreFetching"] = "setIsShowMoreFetching";
     ActionTypes["PageChange"] = "pageChange";
     ActionTypes["QueryParamsChange"] = "queryParamsChange";
 })(ActionTypes || (ActionTypes = {}));
@@ -17,11 +16,9 @@ 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, isShowMoreFetching: true });
+            return Object.assign(Object.assign({}, state), { lastLoadedCount: payload.lastLoadedCount, postCountOnPage: payload.count, currentPage: payload.currentPage, postsOnPage: payload.posts, errorShowMore: false });
         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/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, setIsFetching, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, handleChangeQuery, queryParams, }) => {
+export const FeedHeader = ({ tags, services, handleLoadData, offset = 'default', background, theme = 'default', verticalOffset = 'l', className, 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, setIsFetching, 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, setIsFetching: setIsFetching, handleChangeQuery: handleChangeQuery, queryParams: queryParams }))));
+            React.createElement(Controls, { tags: tags, services: services, handleLoadData: handleLoadData, queryParams: queryParams }))));
 };

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

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { HandleChangeQueryParams, Query, SetQueryType } from '../../../../models/common';
+import { FetchArgs, Query, SetQueryType } from '../../../../models/common';
 import './Controls.css';
 export type SelectItem = {
     content: string;
@@ -7,10 +7,9 @@ export type SelectItem = {
     icon?: ReactNode;
 };
 export type ControlsProps = {
-    setIsFetching: (value: boolean) => void;
+    handleLoadData: (props: FetchArgs) => 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 = ({ setIsFetching, tags = [], services = [], handleChangeQuery, queryParams, }) => {
+export const Controls = ({ handleLoadData, tags = [], services = [], queryParams, }) => {
     const { hasLikes } = useContext(LikesContext);
     const handleAnalyticsTag = useAnalytics(DefaultEventNames.Tag);
     const handleAnalyticsService = useAnalytics(DefaultEventNames.Service);
@@ -28,21 +28,25 @@ export const Controls = ({ setIsFetching, tags = [], services = [], handleChange
     const [savedOnly, setSavedOnly] = useState(savedOnlyInitial === 'true');
     const [search, setSearch] = useState(searchInitial);
     const handleSavedOnly = () => {
-        handleChangeQuery({
-            savedOnly: savedOnly ? '' : 'true',
-            search: '',
-            tags: '',
-            page: DEFAULT_PAGE,
-            services: '',
-        });
         handleAnalyticsSaveOnly();
         setSavedOnly(!savedOnly);
-        setIsFetching(true);
+        handleLoadData({
+            page: DEFAULT_PAGE,
+            query: {
+                savedOnly: savedOnly ? '' : 'true',
+                search: '',
+                tags: '',
+                page: DEFAULT_PAGE,
+                services: '',
+            },
+        });
     };
     const handleSearch = (searchValue) => {
-        handleChangeQuery({ search: searchValue, page: DEFAULT_PAGE });
         setSearch(searchValue);
-        setIsFetching(true);
+        handleLoadData({
+            page: DEFAULT_PAGE,
+            query: { search: searchValue, page: DEFAULT_PAGE },
+        });
     };
     const handleTagSelect = (selectedTags) => {
         /**
@@ -55,11 +59,13 @@ export const Controls = ({ setIsFetching, tags = [], services = [], handleChange
             theme: selectedTags[0],
         });
         const isEmptyTag = selectedTags.some((tag) => tag === 'empty');
-        handleChangeQuery({
-            tags: isEmptyTag ? '' : selectedTags[0],
+        handleLoadData({
             page: DEFAULT_PAGE,
+            query: {
+                tags: isEmptyTag ? '' : selectedTags[0],
+                page: DEFAULT_PAGE,
+            },
         });
-        setIsFetching(true);
     };
     const handleServicesSelect = (selectedServices) => {
         const forMetrikaServices = services.filter((service) => {
@@ -76,8 +82,10 @@ export const Controls = ({ setIsFetching, tags = [], services = [], handleChange
             service: metrikaAsString,
         });
         const servicesAsString = selectedServices.join(',');
-        handleChangeQuery({ services: servicesAsString, page: DEFAULT_PAGE });
-        setIsFetching(true);
+        handleLoadData({
+            page: DEFAULT_PAGE,
+            query: { services: servicesAsString, page: DEFAULT_PAGE },
+        });
     };
     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, loading, onPageChange, pageCountForShowSupportButtons, }: PaginatorProps) => JSX.Element | null;
+export declare const Paginator: ({ itemsPerPage, totalItems, maxPages, page, className, 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, loading, onPageChange, pageCountForShowSupportButtons = DEFAULT_PAGE_COUNT_FOR_SHOW_SUPPORT_BUTTONS, }) => {
+export const Paginator = ({ itemsPerPage, totalItems, maxPages, page, className, 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, { loading: loading }));
+        return React.createElement(PaginatorItem, Object.assign({ key: `page_${key}` }, rest));
     };
     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,7 +15,6 @@ 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,9 +1,15 @@
 /* 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;
@@ -25,4 +31,23 @@ 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,7 +9,6 @@ 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[];

package/build/esm/components/Posts/Posts.js

@@ -8,8 +8,9 @@ import { PostCard } from '../PostCard/PostCard';
 import { PostsEmpty } from '../PostsEmpty/PostsEmpty';
 import './Posts.css';
 const b = block('posts');
-export const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, isShowMoreFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }) => (React.createElement("div", { className: b() },
-    React.createElement("div", { id: containerId, className: b('cards-container') },
+export const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage, isShowMoreVisible, errorShowMore, postCountOnPage, perPageInQuery, isFetching, handleShowMore, handlePageChange, pageCountForShowSupportButtons, }) => (React.createElement("div", { className: b() },
+    isFetching && React.createElement("div", { className: b('loaderContainer') }),
+    React.createElement("div", { id: containerId, className: b('cards-container', { isLoading: isFetching }) },
         pinnedPostOnPage && currentPage === 1 && (React.createElement("div", { className: b('pinned-container') },
             React.createElement(PostCard, { post: pinnedPostOnPage, size: "m", fullWidth: true, showTag: true }))),
         (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length) ? (React.createElement(CardLayoutBlock, { title: '', colSizes: {
@@ -18,9 +19,9 @@ export const Posts = ({ containerId, pinnedPostOnPage, currentPage, postsOnPage,
                 md: 6,
             } }, postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.map((post) => (React.createElement(PostCard, { key: post.id, post: post, showTag: true }))))) : (React.createElement(PostsEmpty, null))),
     React.createElement("div", { className: b('pagination') },
-        Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (React.createElement(Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore, loading: isShowMoreFetching }, i18(Keyset.ActionLoadMore))),
+        Boolean(isShowMoreVisible && (postsOnPage === null || postsOnPage === void 0 ? void 0 : postsOnPage.length)) && (React.createElement(Button, { view: "outlined", size: "xl", className: b('more-button'), onClick: handleShowMore }, i18(Keyset.ActionLoadMore))),
         errorShowMore && (React.createElement("div", { className: b('error-show-more') },
             React.createElement("div", null, i18(Keyset.ErrorTitle)),
             React.createElement("div", null, i18(Keyset.PostLoadError)))),
         Boolean(currentPage && postCountOnPage) && (React.createElement("div", { className: b('paginator') },
-            React.createElement(Paginator, { onPageChange: handlePageChange, page: currentPage, totalItems: postCountOnPage, itemsPerPage: perPageInQuery, loading: isFetching, maxPages: Infinity, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))))));
+            React.createElement(Paginator, { onPageChange: handlePageChange, page: currentPage, totalItems: postCountOnPage, itemsPerPage: perPageInQuery, maxPages: Infinity, pageCountForShowSupportButtons: pageCountForShowSupportButtons }))))));

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

@@ -161,3 +161,7 @@ export declare enum DefaultEventNames {
     Service = "selector-service-click",
     SaveOnly = "save-only-button-click"
 }
+export type FetchArgs = {
+    page?: number;
+    query: Query;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/blog-constructor",
-  "version": "3.3.0",
+  "version": "3.4.0-alpha.0",
   "description": "Gravity UI Blog Constructor",
   "license": "MIT",
   "repository": {
@@ -141,5 +141,8 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
+  },
+  "publishConfig": {
+    "tag": "alpha"
   }
 }

package/server/models/common.d.ts

@@ -161,3 +161,7 @@ export declare enum DefaultEventNames {
     Service = "selector-service-click",
     SaveOnly = "save-only-button-click"
 }
+export type FetchArgs = {
+    page?: number;
+    query: Query;
+};