From d416b90bae7151f3f8a8c5e1a76aaadcf54d86e5 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 27 Jan 2026 14:00:29 +0300
Subject: [PATCH 1/4] Switch UI to pagination-based projects and users API
 #3490

---
 .../App/Login/LoginByGithubCallback/index.tsx |   2 +-
 .../useCheckingForFleetsInProjectsOfMember.ts |   9 +-
 frontend/src/hooks/useProjectFilter.ts        |   2 +-
 .../layouts/AppLayout/TutorialPanel/hooks.ts  |   2 +-
 .../src/pages/Events/List/hooks/useFilters.ts |   4 +-
 frontend/src/pages/Models/List/hooks.tsx      |   2 +-
 frontend/src/pages/Project/List/index.tsx     | 101 ++++++--------
 .../Members/UsersAutosuggest/index.tsx        |   2 +-
 frontend/src/pages/Project/Members/index.tsx  |   2 +-
 .../hooks/useGetRunSpecFromYaml.ts            |   1 +
 .../pages/Runs/CreateDevEnvironment/index.tsx |   1 +
 .../src/pages/Runs/List/hooks/useFilters.ts   |   2 +-
 .../src/pages/User/Details/Projects/index.tsx |   2 +-
 frontend/src/pages/User/List/hooks.tsx        |  39 ++++++
 frontend/src/pages/User/List/index.tsx        | 129 +++++++-----------
 frontend/src/services/project.ts              |   7 +-
 frontend/src/services/user.ts                 |   6 +-
 frontend/src/types/project.d.ts               |   5 +-
 frontend/src/types/user.d.ts                  |   5 +
 frontend/webpack/dev.js                       |   2 +-
 20 files changed, 164 insertions(+), 161 deletions(-)
 create mode 100644 frontend/src/pages/User/List/hooks.tsx

diff --git a/frontend/src/App/Login/LoginByGithubCallback/index.tsx b/frontend/src/App/Login/LoginByGithubCallback/index.tsx
index af88aa72f1..45be311b6b 100644
--- a/frontend/src/App/Login/LoginByGithubCallback/index.tsx
+++ b/frontend/src/App/Login/LoginByGithubCallback/index.tsx
@@ -41,7 +41,7 @@ export const LoginByGithubCallback: React.FC = () => {
                         .then(async ({ creds: { token } }) => {
                             dispatch(setAuthData({ token }));
                             if (process.env.UI_VERSION === 'sky') {
-                                const result = await getProjects().unwrap();
+                                const result = await getProjects({}).unwrap();
                                 if (result?.length === 0) {
                                     navigate(ROUTES.PROJECT.ADD);
                                     return;
diff --git a/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts b/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
index d91b78a3b1..470b4ab73b 100644
--- a/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
+++ b/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
@@ -5,9 +5,12 @@ import { useGetOnlyNoFleetsProjectsQuery, useGetProjectsQuery } from 'services/p
 type Args = { projectNames?: IProject['project_name'][] };
 
 export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
-    const { data: projectsData } = useGetProjectsQuery(undefined, {
-        skip: !!projectNames?.length,
-    });
+    const { data: projectsData } = useGetProjectsQuery(
+        {},
+        {
+            skip: !!projectNames?.length,
+        },
+    );
 
     const { data: noFleetsProjectsData } = useGetOnlyNoFleetsProjectsQuery();
 
diff --git a/frontend/src/hooks/useProjectFilter.ts b/frontend/src/hooks/useProjectFilter.ts
index b4573b1f8e..cf8cb22b6e 100644
--- a/frontend/src/hooks/useProjectFilter.ts
+++ b/frontend/src/hooks/useProjectFilter.ts
@@ -16,7 +16,7 @@ export const useProjectFilter = ({ localStorePrefix }: Args) => {
         null,
     );
 
-    const { data: projectsData } = useGetProjectsQuery();
+    const { data: projectsData } = useGetProjectsQuery({});
 
     const projectOptions = useMemo<SelectCSDProps.Options>(() => {
         if (!projectsData?.length) return [];
diff --git a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
index d3a465fcb5..e5a5aaa973 100644
--- a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
+++ b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
@@ -44,7 +44,7 @@ export const useTutorials = () => {
     } = useAppSelector(selectTutorialPanel);
 
     const { data: userBillingData } = useGetUserBillingInfoQuery({ username: useName ?? '' }, { skip: !useName });
-    const { data: projectData } = useGetProjectsQuery();
+    const { data: projectData } = useGetProjectsQuery({});
     const { data: runsData } = useGetRunsQuery({
         limit: 1,
     });
diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
index a3d510718f..8c0895b0a4 100644
--- a/frontend/src/pages/Events/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -69,8 +69,8 @@ const targetTypes = [
 
 export const useFilters = () => {
     const [searchParams, setSearchParams] = useSearchParams();
-    const { data: projectsData } = useGetProjectsQuery();
-    const { data: usersData } = useGetUserListQuery();
+    const { data: projectsData } = useGetProjectsQuery({});
+    const { data: usersData } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
diff --git a/frontend/src/pages/Models/List/hooks.tsx b/frontend/src/pages/Models/List/hooks.tsx
index 912875b394..23602955b7 100644
--- a/frontend/src/pages/Models/List/hooks.tsx
+++ b/frontend/src/pages/Models/List/hooks.tsx
@@ -129,7 +129,7 @@ const filterKeys: Record<string, RequestParamsKeys> = {
 export const useFilters = (localStorePrefix = 'models-list-page') => {
     const [searchParams, setSearchParams] = useSearchParams();
     const { projectOptions } = useProjectFilter({ localStorePrefix });
-    const { data: usersData } = useGetUserListQuery();
+    const { data: usersData } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
diff --git a/frontend/src/pages/Project/List/index.tsx b/frontend/src/pages/Project/List/index.tsx
index af4afcf5dc..f9fa62e8dd 100644
--- a/frontend/src/pages/Project/List/index.tsx
+++ b/frontend/src/pages/Project/List/index.tsx
@@ -1,44 +1,36 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { get as _get } from 'lodash';
-
-import {
-    Button,
-    ButtonWithConfirmation,
-    Header,
-    ListEmptyMessage,
-    Pagination,
-    SpaceBetween,
-    Table,
-    TextFilter,
-} from 'components';
-
-import { useBreadcrumbs, useCollection } from 'hooks';
+
+import { Button, ButtonWithConfirmation, Header, ListEmptyMessage, Loader, SpaceBetween, Table, TextFilter } from 'components';
+
+import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
+import { useBreadcrumbs, useCollection, useInfiniteScroll } from 'hooks';
 import { ROUTES } from 'routes';
-import { useGetProjectsQuery } from 'services/project';
+import { useLazyGetProjectsQuery } from 'services/project';
 
 import { useCheckAvailableProjectPermission } from '../hooks/useCheckAvailableProjectPermission';
 import { useDeleteProject } from '../hooks/useDeleteProject';
 import { useColumnsDefinitions } from './hooks';
 
-const SEARCHABLE_COLUMNS = ['project_name', 'owner.username'];
-
 export const ProjectList: React.FC = () => {
     const { t } = useTranslation();
 
-    const { isLoading, isFetching, data, refetch } = useGetProjectsQuery();
     const { isAvailableDeletingPermission, isAvailableProjectManaging } = useCheckAvailableProjectPermission();
     const { deleteProject, deleteProjects, isDeleting } = useDeleteProject();
+    const [filteringText, setFilteringText] = useState('');
+    const [namePattern, setNamePattern] = useState<string>('');
     const navigate = useNavigate();
 
-    const sortedData = useMemo<IProject[]>(() => {
-        if (!data) return [];
+    const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IProject, TGetProjectListParams>({
+        useLazyQuery: useLazyGetProjectsQuery,
+        args: { name_pattern: namePattern, limit: DEFAULT_TABLE_PAGE_SIZE },
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return [...data].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-    }, [data]);
+        getPaginationParams: (lastProject) => ({
+            prev_created_at: lastProject.created_at,
+            prev_id: lastProject.project_id,
+        }),
+    });
 
     useBreadcrumbs([
         {
@@ -51,7 +43,24 @@ export const ProjectList: React.FC = () => {
         navigate(ROUTES.PROJECT.ADD);
     };
 
+    const onClearFilter = () => {
+        setNamePattern('');
+        setFilteringText('');
+    };
+
     const renderEmptyMessage = (): React.ReactNode => {
+        if (isLoading) {
+            return null;
+        }
+
+        if (filteringText) {
+            return (
+                <ListEmptyMessage title={t('projects.nomatch_message_title')} message={t('projects.nomatch_message_text')}>
+                    <Button onClick={onClearFilter}>{t('projects.nomatch_message_button_label')}</Button>
+                </ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('projects.empty_message_title')} message={t('projects.empty_message_text')}>
                 {isAvailableProjectManaging && <Button onClick={addProjectHandler}>{t('common.create')}</Button>}
@@ -59,28 +68,10 @@ export const ProjectList: React.FC = () => {
         );
     };
 
-    const renderNoMatchMessage = (onClearFilter: () => void): React.ReactNode => {
-        return (
-            <ListEmptyMessage title={t('projects.nomatch_message_title')} message={t('projects.nomatch_message_text')}>
-                <Button onClick={onClearFilter}>{t('projects.nomatch_message_button_label')}</Button>
-            </ListEmptyMessage>
-        );
-    };
-
-    const { items, actions, filteredItemsCount, collectionProps, filterProps, paginationProps } = useCollection(sortedData, {
+    const { items, collectionProps } = useCollection(data, {
         filtering: {
             empty: renderEmptyMessage(),
-            noMatch: renderNoMatchMessage(() => actions.setFiltering('')),
-
-            filteringFunction: (projectItem: IProject, filteringText) => {
-                const filteringTextLowerCase = filteringText.toLowerCase();
-
-                return SEARCHABLE_COLUMNS.map((key) => _get(projectItem, key)).some(
-                    (value) => typeof value === 'string' && value.trim().toLowerCase().indexOf(filteringTextLowerCase) > -1,
-                );
-            },
         },
-        pagination: { pageSize: 20 },
         selection: {},
     });
 
@@ -103,12 +94,6 @@ export const ProjectList: React.FC = () => {
         onDeleteClick: isAvailableProjectManaging ? deleteProject : undefined,
     });
 
-    const renderCounter = () => {
-        if (!data?.length) return '';
-
-        return `(${data.length})`;
-    };
-
     return (
         <>
             <Table
@@ -116,14 +101,13 @@ export const ProjectList: React.FC = () => {
                 variant="full-page"
                 columnDefinitions={columns}
                 items={items}
-                loading={isLoading || isFetching}
+                loading={isLoading}
                 loadingText={t('common.loading')}
                 selectionType={isAvailableProjectManaging ? 'multi' : undefined}
                 stickyHeader={true}
                 header={
                     <Header
                         variant="awsui-h1-sticky"
-                        counter={renderCounter()}
                         actions={
                             isAvailableProjectManaging && (
                                 <SpaceBetween size="xs" direction="horizontal">
@@ -141,9 +125,9 @@ export const ProjectList: React.FC = () => {
 
                                     <Button
                                         iconName="refresh"
-                                        disabled={isLoading || isFetching}
+                                        disabled={isLoading}
                                         ariaLabel={t('common.refresh')}
-                                        onClick={refetch}
+                                        onClick={refreshList}
                                     />
                                 </SpaceBetween>
                             )
@@ -154,13 +138,14 @@ export const ProjectList: React.FC = () => {
                 }
                 filter={
                     <TextFilter
-                        {...filterProps}
-                        filteringPlaceholder={t('projects.search_placeholder') || ''}
-                        countText={t('common.match_count_with_value', { count: filteredItemsCount }) ?? ''}
+                        filteringText={filteringText}
+                        onChange={({ detail }) => setFilteringText(detail.filteringText)}
+                        onDelayedChange={() => setNamePattern(filteringText)}
                         disabled={isLoading}
+                        filteringPlaceholder={t('projects.search_placeholder') || ''}
                     />
                 }
-                pagination={<Pagination {...paginationProps} disabled={isLoading} />}
+                footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
             />
         </>
     );
diff --git a/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx b/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
index fdb7d9ff8c..01288bc9b3 100644
--- a/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
+++ b/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
@@ -14,7 +14,7 @@ type AutosuggestOption = { value: string; label?: string };
 export const UserAutosuggest: React.FC<Props> = ({ optionsFilter, onSelect: onSelectProp, ...props }) => {
     const { t } = useTranslation();
     const [value, setValue] = useState<string>('');
-    const { data: usersData, isLoading: isUsersLoading } = useGetUserListQuery();
+    const { data: usersData, isLoading: isUsersLoading } = useGetUserListQuery({});
 
     const options: AutosuggestOption[] = useMemo(() => {
         if (!usersData) return [];
diff --git a/frontend/src/pages/Project/Members/index.tsx b/frontend/src/pages/Project/Members/index.tsx
index 007c64b9d7..818049e175 100644
--- a/frontend/src/pages/Project/Members/index.tsx
+++ b/frontend/src/pages/Project/Members/index.tsx
@@ -32,7 +32,7 @@ import styles from './styles.module.scss';
 export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, readonly, isAdmin, project }) => {
     const { t } = useTranslation();
     const [selectedItems, setSelectedItems] = useState<TProjectMemberWithIndex[]>([]);
-    const { data: usersData } = useGetUserListQuery();
+    const { data: usersData } = useGetUserListQuery({});
     const userData = useAppSelector(selectUserData);
     const { handleJoinProject, handleLeaveProject, isMemberActionLoading } = useProjectMemberActions();
     const [pushNotification] = useNotifications();
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts b/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts
index 70ec4d5342..7815d1daca 100644
--- a/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts
+++ b/frontend/src/pages/Runs/CreateDevEnvironment/hooks/useGetRunSpecFromYaml.ts
@@ -56,6 +56,7 @@ export const useGetRunSpecFromYaml = ({ projectName = '' }) => {
 
             try {
                 await getRepo({ project_name: projectName, repo_id: repoId, include_creds: true }).unwrap();
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
             } catch (_) {
                 await initRepo({
                     project_name: projectName,
diff --git a/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx b/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
index af52513760..fcac5194af 100644
--- a/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
+++ b/frontend/src/pages/Runs/CreateDevEnvironment/index.tsx
@@ -53,6 +53,7 @@ const envValidationSchema = yup.object({
         is: true,
         then: yup
             .string()
+            // eslint-disable-next-line no-useless-escape
             .matches(/^(https?):\/\/([^\s\/?#]+)((?:\/[^\s?#]*)*)(?::\/(.*))?$/i, urlFormatError)
             .required(requiredFieldError),
     }),
diff --git a/frontend/src/pages/Runs/List/hooks/useFilters.ts b/frontend/src/pages/Runs/List/hooks/useFilters.ts
index d675f78ea5..db2bdcb530 100644
--- a/frontend/src/pages/Runs/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Runs/List/hooks/useFilters.ts
@@ -23,7 +23,7 @@ export const useFilters = ({ localStorePrefix }: Args) => {
     const [searchParams, setSearchParams] = useSearchParams();
     const [onlyActive, setOnlyActive] = useState(() => searchParams.get('only_active') === 'true');
     const { projectOptions } = useProjectFilter({ localStorePrefix });
-    const { data: usersData } = useGetUserListQuery();
+    const { data: usersData } = useGetUserListQuery({});
 
     const [propertyFilterQuery, setPropertyFilterQuery] = useState<PropertyFilterProps.Query>(() =>
         requestParamsToTokens<RequestParamsKeys>({ searchParams, filterKeys }),
diff --git a/frontend/src/pages/User/Details/Projects/index.tsx b/frontend/src/pages/User/Details/Projects/index.tsx
index d1370aec93..71ba122d97 100644
--- a/frontend/src/pages/User/Details/Projects/index.tsx
+++ b/frontend/src/pages/User/Details/Projects/index.tsx
@@ -18,7 +18,7 @@ export const UserProjectList: React.FC = () => {
     const params = useParams();
     const paramUserName = params.userName ?? '';
 
-    const { isLoading, isFetching, data } = useGetProjectsQuery();
+    const { isLoading, isFetching, data } = useGetProjectsQuery({ limit: 200 });
 
     useBreadcrumbs([
         {
diff --git a/frontend/src/pages/User/List/hooks.tsx b/frontend/src/pages/User/List/hooks.tsx
new file mode 100644
index 0000000000..7f9f24549c
--- /dev/null
+++ b/frontend/src/pages/User/List/hooks.tsx
@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { format } from 'date-fns';
+
+import { Link, NavigateLink } from 'components';
+
+import { DATE_TIME_FORMAT } from 'consts';
+import { ROUTES } from 'routes';
+
+export const useColumnDefinitions = () => {
+    const { t } = useTranslation();
+
+    return useMemo(() => {
+        return [
+            {
+                id: 'name',
+                header: t('users.user_name'),
+                cell: (item: IUser) => (
+                    <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(item.username)}>{item.username}</NavigateLink>
+                ),
+            },
+            {
+                id: 'email',
+                header: t('users.email'),
+                cell: (item: IUser) => (item.email ? <Link href={`mailto:${item.email}`}>{item.email}</Link> : '-'),
+            },
+            {
+                id: 'global_role',
+                header: t('users.global_role'),
+                cell: (item: IUser) => t(`roles.${item.global_role}`),
+            },
+            process.env.UI_VERSION === 'sky' && {
+                id: 'created_at',
+                header: t('users.created_at'),
+                cell: (item: IUser) => format(new Date(item.created_at), DATE_TIME_FORMAT),
+            },
+        ].filter(Boolean);
+    }, []);
+};
diff --git a/frontend/src/pages/User/List/index.tsx b/frontend/src/pages/User/List/index.tsx
index 61d14e83fc..368b8dfe94 100644
--- a/frontend/src/pages/User/List/index.tsx
+++ b/frontend/src/pages/User/List/index.tsx
@@ -1,47 +1,38 @@
 import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { format } from 'date-fns';
-
-import {
-    Box,
-    Button,
-    ConfirmationDialog,
-    Header,
-    Link,
-    ListEmptyMessage,
-    NavigateLink,
-    Pagination,
-    SpaceBetween,
-    Table,
-    TextFilter,
-} from 'components';
-
-import { DATE_TIME_FORMAT } from 'consts';
-import { useAppSelector, useBreadcrumbs, useCollection, useNotifications } from 'hooks';
-import { getServerError, includeSubString } from 'libs';
+
+import { Box, Button, ConfirmationDialog, Header, ListEmptyMessage, Loader, SpaceBetween, Table, TextFilter } from 'components';
+
+import { DEFAULT_TABLE_PAGE_SIZE } from 'consts';
+import { useAppSelector, useBreadcrumbs, useCollection, useInfiniteScroll, useNotifications } from 'hooks';
+import { getServerError } from 'libs';
 import { ROUTES } from 'routes';
-import { useDeleteUsersMutation, useGetUserListQuery } from 'services/user';
+import { useDeleteUsersMutation, useLazyGetUserListQuery } from 'services/user';
 
 import { selectUserData } from 'App/slice';
 
+import { useColumnDefinitions } from './hooks';
+
 export const UserList: React.FC = () => {
     const { t } = useTranslation();
     const [showDeleteConfirm, setShowConfirmDelete] = useState(false);
+    const [filteringText, setFilteringText] = useState('');
+    const [namePattern, setNamePattern] = useState<string>('');
     const userData = useAppSelector(selectUserData);
     const userGlobalRole = userData?.global_role ?? '';
-    const { isLoading, isFetching, data, refetch } = useGetUserListQuery();
     const [deleteUsers, { isLoading: isDeleting }] = useDeleteUsersMutation();
     const navigate = useNavigate();
     const [pushNotification] = useNotifications();
 
-    const sortedData = useMemo<IUser[]>(() => {
-        if (!data) return [];
+    const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IUser, TGetUserListParams>({
+        useLazyQuery: useLazyGetUserListQuery,
+        args: { name_pattern: namePattern, limit: DEFAULT_TABLE_PAGE_SIZE },
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return [...data].sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
-    }, [data]);
+        getPaginationParams: (lastUser) => ({
+            prev_created_at: lastUser.created_at,
+        }),
+    });
 
     useBreadcrumbs([
         {
@@ -50,30 +41,7 @@ export const UserList: React.FC = () => {
         },
     ]);
 
-    const COLUMN_DEFINITIONS = [
-        {
-            id: 'name',
-            header: t('users.user_name'),
-            cell: (item: IUser) => (
-                <NavigateLink href={ROUTES.USER.DETAILS.FORMAT(item.username)}>{item.username}</NavigateLink>
-            ),
-        },
-        {
-            id: 'email',
-            header: t('users.email'),
-            cell: (item: IUser) => (item.email ? <Link href={`mailto:${item.email}`}>{item.email}</Link> : '-'),
-        },
-        {
-            id: 'global_role',
-            header: t('users.global_role'),
-            cell: (item: IUser) => t(`roles.${item.global_role}`),
-        },
-        process.env.UI_VERSION === 'sky' && {
-            id: 'created_at',
-            header: t('users.created_at'),
-            cell: (item: IUser) => format(new Date(item.created_at), DATE_TIME_FORMAT),
-        },
-    ].filter(Boolean);
+    const columns = useColumnDefinitions();
 
     const toggleDeleteConfirm = () => {
         setShowConfirmDelete((val) => !val);
@@ -83,7 +51,24 @@ export const UserList: React.FC = () => {
         navigate(ROUTES.USER.ADD);
     };
 
+    const onClearFilter = () => {
+        setNamePattern('');
+        setFilteringText('');
+    };
+
     const renderEmptyMessage = (): React.ReactNode => {
+        if (isLoading) {
+            return null;
+        }
+
+        if (filteringText) {
+            return (
+                <ListEmptyMessage title={t('users.nomatch_message_title')} message={t('users.nomatch_message_text')}>
+                    <Button onClick={onClearFilter}>{t('common.clearFilter')}</Button>
+                </ListEmptyMessage>
+            );
+        }
+
         return (
             <ListEmptyMessage title={t('users.empty_message_title')} message={t('projects.empty_message_text')}>
                 <Button onClick={addUserHandler}>{t('common.add')}</Button>
@@ -91,22 +76,10 @@ export const UserList: React.FC = () => {
         );
     };
 
-    const renderNoMatchMessage = (onClearFilter: () => void): React.ReactNode => {
-        return (
-            <ListEmptyMessage title={t('users.nomatch_message_title')} message={t('users.nomatch_message_text')}>
-                <Button onClick={onClearFilter}>{t('common.clearFilter')}</Button>
-            </ListEmptyMessage>
-        );
-    };
-
-    const { items, actions, filteredItemsCount, collectionProps, filterProps, paginationProps } = useCollection(sortedData, {
+    const { items, actions, collectionProps } = useCollection(data, {
         filtering: {
             empty: renderEmptyMessage(),
-            noMatch: renderNoMatchMessage(() => actions.setFiltering('')),
-            filteringFunction: (user, filteringText) =>
-                includeSubString(user.username, filteringText) || includeSubString(user.email ?? '', filteringText),
         },
-        pagination: { pageSize: 20 },
         selection: {},
     });
 
@@ -144,32 +117,23 @@ export const UserList: React.FC = () => {
         return isDeleting || collectionProps.selectedItems?.length !== 1 || userGlobalRole !== 'admin';
     }, [collectionProps.selectedItems]);
 
-    const renderCounter = () => {
-        const { selectedItems } = collectionProps;
-
-        if (!data?.length) return '';
-
-        if (selectedItems?.length) return `(${selectedItems?.length}/${data?.length ?? 0})`;
-
-        return `(${data.length})`;
-    };
-
     return (
         <>
             <Table
                 {...collectionProps}
                 variant="full-page"
                 isItemDisabled={getIsTableItemDisabled}
-                columnDefinitions={COLUMN_DEFINITIONS}
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                columnDefinitions={columns}
                 items={items}
-                loading={isLoading || isFetching}
+                loading={isLoading}
                 loadingText={t('common.loading')}
                 selectionType="multi"
                 stickyHeader={true}
                 header={
                     <Header
                         variant="awsui-h1-sticky"
-                        counter={renderCounter()}
                         actions={
                             <SpaceBetween size="xs" direction="horizontal">
                                 <Button formAction="none" onClick={editSelectedUserHandler} disabled={isDisabledEdit}>
@@ -186,9 +150,9 @@ export const UserList: React.FC = () => {
 
                                 <Button
                                     iconName="refresh"
-                                    disabled={isLoading || isFetching}
+                                    disabled={isLoading}
                                     ariaLabel={t('common.refresh')}
-                                    onClick={refetch}
+                                    onClick={refreshList}
                                 />
                             </SpaceBetween>
                         }
@@ -198,13 +162,14 @@ export const UserList: React.FC = () => {
                 }
                 filter={
                     <TextFilter
-                        {...filterProps}
+                        filteringText={filteringText}
+                        onChange={({ detail }) => setFilteringText(detail.filteringText)}
+                        onDelayedChange={() => setNamePattern(filteringText)}
                         filteringPlaceholder={t('users.search_placeholder')}
-                        countText={t('common.match_count_with_value', { count: filteredItemsCount })}
                         disabled={isLoading}
                     />
                 }
-                pagination={<Pagination {...paginationProps} disabled={isLoading} />}
+                footer={<Loader show={isLoadingMore} padding={{ vertical: 'm' }} />}
             />
 
             <ConfirmationDialog
diff --git a/frontend/src/services/project.ts b/frontend/src/services/project.ts
index 8875c48df6..2663d9697d 100644
--- a/frontend/src/services/project.ts
+++ b/frontend/src/services/project.ts
@@ -23,11 +23,12 @@ export const projectApi = createApi({
     tagTypes: ['Projects', 'NoFleetsProject', 'ProjectRepos', 'ProjectLogs', 'Backends'],
 
     endpoints: (builder) => ({
-        getProjects: builder.query<IProject[], void>({
-            query: () => {
+        getProjects: builder.query<IProject[], TGetProjectListParams>({
+            query: (body) => {
                 return {
                     url: API.PROJECTS.LIST(),
                     method: 'POST',
+                    body,
                 };
             },
 
@@ -201,8 +202,8 @@ export const projectApi = createApi({
 
 export const {
     useGetProjectsQuery,
-    useGetOnlyNoFleetsProjectsQuery,
     useLazyGetProjectsQuery,
+    useGetOnlyNoFleetsProjectsQuery,
     useGetProjectQuery,
     useCreateProjectMutation,
     useCreateWizardProjectMutation,
diff --git a/frontend/src/services/user.ts b/frontend/src/services/user.ts
index 05b589adc5..b271107d24 100644
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -37,11 +37,12 @@ export const userApi = createApi({
             },
         }),
 
-        getUserList: builder.query<IUser[], void>({
-            query: () => {
+        getUserList: builder.query<IUser[], TGetUserListParams>({
+            query: (body) => {
                 return {
                     url: API.USERS.LIST(),
                     method: 'POST',
+                    body,
                 };
             },
 
@@ -194,6 +195,7 @@ export const userApi = createApi({
 export const {
     useGetUserDataQuery,
     useGetUserListQuery,
+    useLazyGetUserListQuery,
     useGetUserQuery,
     useCheckAuthTokenMutation,
     useCreateUserMutation,
diff --git a/frontend/src/types/project.d.ts b/frontend/src/types/project.d.ts
index babb4dab7a..6885123e33 100644
--- a/frontend/src/types/project.d.ts
+++ b/frontend/src/types/project.d.ts
@@ -7,9 +7,10 @@ declare type TCreateWizardProjectParams = {
     };
 };
 
-declare type TGetProjectsParams = {
-    only_no_fleets?: boolean;
+declare type TGetProjectListParams = TBaseRequestListParams & {
     include_not_joined?: boolean;
+    return_total_count?: boolean;
+    name_pattern?: string;
 };
 
 declare type TProjectBackend = {
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
index 6e4b443bc1..2c27fd1350 100644
--- a/frontend/src/types/user.d.ts
+++ b/frontend/src/types/user.d.ts
@@ -2,6 +2,11 @@ declare type TUserRole = 'user' | 'admin';
 declare type TUserPermission = 'CAN_CREATE_PROJECTS';
 declare type TUserPermissionKeys = 'can_create_projects';
 
+declare type TGetUserListParams = TBaseRequestListParams & {
+    return_total_count?: boolean;
+    name_pattern?: string;
+};
+
 declare interface IUserResponseData {
     id: string;
     username: string;
diff --git a/frontend/webpack/dev.js b/frontend/webpack/dev.js
index a286e77f4c..1b4c8e4d4b 100644
--- a/frontend/webpack/dev.js
+++ b/frontend/webpack/dev.js
@@ -4,7 +4,7 @@ const { srcDir } = require('./env');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
-const port = 3000;
+const port = 3002;
 
 module.exports = {
     mode: 'development',

From 8c1ab96cd45c00c92f55c2ced1fbf0491f7e5027 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Tue, 27 Jan 2026 17:04:09 +0300
Subject: [PATCH 2/4] Rollback changes

---
 frontend/webpack/dev.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/webpack/dev.js b/frontend/webpack/dev.js
index 1b4c8e4d4b..6c1d510036 100644
--- a/frontend/webpack/dev.js
+++ b/frontend/webpack/dev.js
@@ -4,7 +4,7 @@ const { srcDir } = require('./env');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 
-const port = 3002;
+const port = 3000;
 
 module.exports = {
     mode: 'development',
@@ -26,7 +26,12 @@ module.exports = {
             {
                 context: ['/api'],
                 changeOrigin: true,
-                target: 'http://127.0.0.1:8000',
+                // target: 'http://127.0.0.1:8000',
+                target: 'http://127.0.0.1:3000',
+                // target: 'https://sky.dstack.ai/', //0ab1c6ee-3f7b-4839-a259-5e5c6074a97f
+                // target: 'https://sky-stage.dstack.ai/', //29001ee8-897c-47ea-bfec-819f56835ffe
+                // target: 'https://cloud.dstack.ai/', //0ab1c6ee-3f7b-4839-a259-5e5c6074a97f
+                // target: 'https://08fdfa6f0dd6.ngrok-free.app/',
                 logLevel: 'debug',
             },
         ],

From 5c1835003ffd1840355039e4d12c0f94c9d5bcca Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Wed, 28 Jan 2026 00:33:44 +0300
Subject: [PATCH 3/4] Showed counters for Project and User List

---
 .../useCheckingForFleetsInProjectsOfMember.ts |  4 +--
 frontend/src/hooks/useInfiniteScroll.ts       | 34 ++++++++++++++++---
 frontend/src/hooks/useProjectFilter.ts        |  8 ++---
 .../layouts/AppLayout/TutorialPanel/hooks.ts  | 10 +++---
 .../src/pages/Events/List/hooks/useFilters.ts | 14 ++++----
 frontend/src/pages/Models/List/hooks.tsx      |  2 +-
 frontend/src/pages/Project/List/index.tsx     |  9 ++++-
 .../Members/UsersAutosuggest/index.tsx        |  2 +-
 frontend/src/pages/Project/Members/index.tsx  |  2 +-
 .../src/pages/Runs/List/hooks/useFilters.ts   |  2 +-
 .../src/pages/User/Details/Projects/index.tsx |  7 ++--
 frontend/src/pages/User/List/index.tsx        |  9 ++++-
 frontend/src/services/project.ts              | 14 +++++---
 frontend/src/services/user.ts                 | 15 ++++++--
 frontend/src/types/project.d.ts               |  5 +++
 frontend/src/types/user.d.ts                  |  5 +++
 16 files changed, 103 insertions(+), 39 deletions(-)

diff --git a/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts b/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
index 470b4ab73b..b330358b46 100644
--- a/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
+++ b/frontend/src/hooks/useCheckingForFleetsInProjectsOfMember.ts
@@ -19,8 +19,8 @@ export const useCheckingForFleetsInProjects = ({ projectNames }: Args) => {
             return projectNames;
         }
 
-        if (projectsData) {
-            return projectsData.map((project) => project.project_name);
+        if (projectsData?.data) {
+            return projectsData.data.map((project) => project.project_name);
         }
 
         return [];
diff --git a/frontend/src/hooks/useInfiniteScroll.ts b/frontend/src/hooks/useInfiniteScroll.ts
index 727586ab00..bed91eba09 100644
--- a/frontend/src/hooks/useInfiniteScroll.ts
+++ b/frontend/src/hooks/useInfiniteScroll.ts
@@ -9,10 +9,14 @@ const SCROLL_POSITION_GAP = 400;
 type InfinityListArgs = Partial<Record<string, unknown>>;
 
 type ListResponse<DataItem> = DataItem[];
+type ResponseWithDataProp<DataItem> = { data: ListResponse<DataItem>; total_count: number };
+
+type LazyQueryResponse<DataItem> = ResponseWithDataProp<DataItem> | ListResponse<DataItem>;
 
 type UseInfinityParams<DataItem, Args extends InfinityListArgs> = {
-    useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, ListResponse<DataItem>, any>>;
+    useLazyQuery: UseLazyQuery<QueryDefinition<Args, any, any, LazyQueryResponse<DataItem>, any>>;
     args: { limit?: number } & Args;
+    getResponseItems?: (listItem: DataItem) => Partial<Args>;
     getPaginationParams: (listItem: DataItem) => Partial<Args>;
     skip?: boolean;
     // options?: UseQueryStateOptions<QueryDefinition<Args, any, any, Data[], any>, Record<string, any>>;
@@ -26,6 +30,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     skip,
 }: UseInfinityParams<DataItem, Args>) => {
     const [data, setData] = useState<ListResponse<DataItem>>([]);
+    const [totalCount, setTotalCount] = useState<number | void>();
     const scrollElement = useRef<HTMLElement>(document.documentElement);
     const isLoadingRef = useRef<boolean>(false);
     const lastRequestParams = useRef<Args | undefined>(undefined);
@@ -49,9 +54,17 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
 
         setData([]);
 
-        getDataRequest(argsProp as Args).then((result) => {
+        getDataRequest(argsProp as Args).then((result: LazyQueryResponse<DataItem>) => {
             setDisabledMore(false);
-            setData(result as ListResponse<DataItem>);
+
+            if ('data' in result) {
+                setData(result.data as ListResponse<DataItem>);
+                setTotalCount(result.total_count);
+            } else {
+                setData(result as ListResponse<DataItem>);
+                setTotalCount();
+            }
+
             isLoadingRef.current = false;
         });
     };
@@ -76,8 +89,18 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
                 ...getPaginationParams(data[data.length - 1]),
             } as Args);
 
-            if (result.length > 0) {
-                setData((prev) => [...prev, ...result]);
+            let listResponse: ListResponse<DataItem>;
+
+            if ('data' in result) {
+                listResponse = result.data;
+                setTotalCount(result.total_count);
+            } else {
+                listResponse = result;
+                setTotalCount();
+            }
+
+            if (listResponse.length > 0) {
+                setData((prev) => [...prev, ...listResponse]);
             } else {
                 setDisabledMore(true);
             }
@@ -126,6 +149,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
 
     return {
         data,
+        totalCount,
         isLoading: isLoading || (data.length === 0 && isFetching),
         isLoadingMore,
         refreshList: getEmptyList,
diff --git a/frontend/src/hooks/useProjectFilter.ts b/frontend/src/hooks/useProjectFilter.ts
index cf8cb22b6e..58e573d31d 100644
--- a/frontend/src/hooks/useProjectFilter.ts
+++ b/frontend/src/hooks/useProjectFilter.ts
@@ -19,17 +19,17 @@ export const useProjectFilter = ({ localStorePrefix }: Args) => {
     const { data: projectsData } = useGetProjectsQuery({});
 
     const projectOptions = useMemo<SelectCSDProps.Options>(() => {
-        if (!projectsData?.length) return [];
+        if (!projectsData?.data?.length) return [];
 
-        return projectsData.map((project) => ({ label: project.project_name, value: project.project_name }));
+        return projectsData.data.map((project) => ({ label: project.project_name, value: project.project_name }));
     }, [projectsData]);
 
     useEffect(() => {
-        if (!projectsData || !selectedProject) {
+        if (!projectsData?.data || !selectedProject) {
             return;
         }
 
-        const hasSelectedProject = projectsData.some(({ project_name }) => selectedProject?.value === project_name);
+        const hasSelectedProject = projectsData.data.some(({ project_name }) => selectedProject?.value === project_name);
 
         if (!hasSelectedProject) {
             setSelectedProject(null);
diff --git a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
index e5a5aaa973..543eb07a7e 100644
--- a/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
+++ b/frontend/src/layouts/AppLayout/TutorialPanel/hooks.ts
@@ -54,14 +54,14 @@ export const useTutorials = () => {
     useEffect(() => {
         if (
             userBillingData &&
-            projectData &&
+            projectData?.data &&
             runsData &&
             !completeIsChecked.current &&
             location.pathname !== ROUTES.PROJECT.ADD
         ) {
             const billingCompleted = userBillingData.balance > 0;
             const configureCLICompleted = runsData.length > 0;
-            const createProjectCompleted = projectData.length > 0;
+            const createProjectCompleted = projectData.data.length > 0;
 
             let tempHideStartUp = hideStartUp;
 
@@ -88,7 +88,7 @@ export const useTutorials = () => {
     }, [userBillingData, runsData, projectData, location.pathname]);
 
     useEffect(() => {
-        if (projectData && projectData.length > 0 && !createProjectCompleted) {
+        if (projectData?.data && projectData.data.length > 0 && !createProjectCompleted) {
             dispatch(
                 updateTutorialPanelState({
                     createProjectCompleted: true,
@@ -114,8 +114,8 @@ export const useTutorials = () => {
     }, []);
 
     const startConfigCliTutorial = useCallback(() => {
-        if (projectData?.length) {
-            navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(projectData[0].project_name));
+        if (projectData?.data?.length) {
+            navigate(ROUTES.PROJECT.DETAILS.SETTINGS.FORMAT(projectData.data[0].project_name));
         }
     }, [projectData]);
 
diff --git a/frontend/src/pages/Events/List/hooks/useFilters.ts b/frontend/src/pages/Events/List/hooks/useFilters.ts
index 8c0895b0a4..4b7d38d085 100644
--- a/frontend/src/pages/Events/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Events/List/hooks/useFilters.ts
@@ -84,7 +84,7 @@ export const useFilters = () => {
     const filteringOptions = useMemo(() => {
         const options: PropertyFilterProps.FilteringOption[] = [];
 
-        projectsData?.forEach(({ project_name }) => {
+        projectsData?.data?.forEach(({ project_name }) => {
             options.push({
                 propertyKey: filterKeys.TARGET_PROJECTS,
                 value: project_name,
@@ -96,7 +96,7 @@ export const useFilters = () => {
             });
         });
 
-        usersData?.forEach(({ username }) => {
+        usersData?.data?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.TARGET_USERS,
                 value: username,
@@ -229,14 +229,16 @@ export const useFilters = () => {
             ...(params[filterKeys.TARGET_PROJECTS] && Array.isArray(params[filterKeys.TARGET_PROJECTS])
                 ? {
                       [filterKeys.TARGET_PROJECTS]: params[filterKeys.TARGET_PROJECTS]?.map(
-                          (name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
+                          (name: string) =>
+                              projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
                       ),
                   }
                 : {}),
             ...(params[filterKeys.WITHIN_PROJECTS] && Array.isArray(params[filterKeys.WITHIN_PROJECTS])
                 ? {
                       [filterKeys.WITHIN_PROJECTS]: params[filterKeys.WITHIN_PROJECTS]?.map(
-                          (name: string) => projectsData?.find(({ project_name }) => project_name === name)?.['project_id'],
+                          (name: string) =>
+                              projectsData?.data?.find(({ project_name }) => project_name === name)?.['project_id'],
                       ),
                   }
                 : {}),
@@ -244,7 +246,7 @@ export const useFilters = () => {
             ...(params[filterKeys.TARGET_USERS] && Array.isArray(params[filterKeys.TARGET_USERS])
                 ? {
                       [filterKeys.TARGET_USERS]: params[filterKeys.TARGET_USERS]?.map(
-                          (name: string) => usersData?.find(({ username }) => username === name)?.['id'],
+                          (name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
                       ),
                   }
                 : {}),
@@ -252,7 +254,7 @@ export const useFilters = () => {
             ...(params[filterKeys.ACTORS] && Array.isArray(params[filterKeys.ACTORS])
                 ? {
                       [filterKeys.ACTORS]: params[filterKeys.ACTORS]?.map(
-                          (name: string) => usersData?.find(({ username }) => username === name)?.['id'],
+                          (name: string) => usersData?.data?.find(({ username }) => username === name)?.['id'],
                       ),
                   }
                 : {}),
diff --git a/frontend/src/pages/Models/List/hooks.tsx b/frontend/src/pages/Models/List/hooks.tsx
index 23602955b7..461bf28a3b 100644
--- a/frontend/src/pages/Models/List/hooks.tsx
+++ b/frontend/src/pages/Models/List/hooks.tsx
@@ -151,7 +151,7 @@ export const useFilters = (localStorePrefix = 'models-list-page') => {
                 });
         });
 
-        usersData?.forEach(({ username }) => {
+        usersData?.data?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.USER_NAME,
                 value: username,
diff --git a/frontend/src/pages/Project/List/index.tsx b/frontend/src/pages/Project/List/index.tsx
index f9fa62e8dd..eb896df91d 100644
--- a/frontend/src/pages/Project/List/index.tsx
+++ b/frontend/src/pages/Project/List/index.tsx
@@ -22,7 +22,7 @@ export const ProjectList: React.FC = () => {
     const [namePattern, setNamePattern] = useState<string>('');
     const navigate = useNavigate();
 
-    const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IProject, TGetProjectListParams>({
+    const { data, isLoading, refreshList, isLoadingMore, totalCount } = useInfiniteScroll<IProject, TGetProjectListParams>({
         useLazyQuery: useLazyGetProjectsQuery,
         args: { name_pattern: namePattern, limit: DEFAULT_TABLE_PAGE_SIZE },
 
@@ -94,6 +94,12 @@ export const ProjectList: React.FC = () => {
         onDeleteClick: isAvailableProjectManaging ? deleteProject : undefined,
     });
 
+    const renderCounter = () => {
+        if (typeof totalCount !== 'number') return '';
+
+        return `(${totalCount})`;
+    };
+
     return (
         <>
             <Table
@@ -108,6 +114,7 @@ export const ProjectList: React.FC = () => {
                 header={
                     <Header
                         variant="awsui-h1-sticky"
+                        counter={renderCounter()}
                         actions={
                             isAvailableProjectManaging && (
                                 <SpaceBetween size="xs" direction="horizontal">
diff --git a/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx b/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
index 01288bc9b3..7cd2dd7541 100644
--- a/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
+++ b/frontend/src/pages/Project/Members/UsersAutosuggest/index.tsx
@@ -19,7 +19,7 @@ export const UserAutosuggest: React.FC<Props> = ({ optionsFilter, onSelect: onSe
     const options: AutosuggestOption[] = useMemo(() => {
         if (!usersData) return [];
 
-        return usersData.map((user) => ({
+        return usersData?.data.map((user) => ({
             value: user.username,
         }));
     }, [usersData]);
diff --git a/frontend/src/pages/Project/Members/index.tsx b/frontend/src/pages/Project/Members/index.tsx
index 818049e175..d68916c6d8 100644
--- a/frontend/src/pages/Project/Members/index.tsx
+++ b/frontend/src/pages/Project/Members/index.tsx
@@ -96,7 +96,7 @@ export const ProjectMembers: React.FC<IProps> = ({ members, loading, onChange, r
             return;
         }
 
-        const selectedUser = usersData?.find((u) => u.username === username);
+        const selectedUser = usersData?.data?.find((u) => u.username === username);
 
         if (selectedUser) {
             append({
diff --git a/frontend/src/pages/Runs/List/hooks/useFilters.ts b/frontend/src/pages/Runs/List/hooks/useFilters.ts
index db2bdcb530..82f1ca40bd 100644
--- a/frontend/src/pages/Runs/List/hooks/useFilters.ts
+++ b/frontend/src/pages/Runs/List/hooks/useFilters.ts
@@ -46,7 +46,7 @@ export const useFilters = ({ localStorePrefix }: Args) => {
                 });
         });
 
-        usersData?.forEach(({ username }) => {
+        usersData?.data?.forEach(({ username }) => {
             options.push({
                 propertyKey: filterKeys.USER_NAME,
                 value: username,
diff --git a/frontend/src/pages/User/Details/Projects/index.tsx b/frontend/src/pages/User/Details/Projects/index.tsx
index 71ba122d97..2cb9885ab3 100644
--- a/frontend/src/pages/User/Details/Projects/index.tsx
+++ b/frontend/src/pages/User/Details/Projects/index.tsx
@@ -41,11 +41,10 @@ export const UserProjectList: React.FC = () => {
     };
 
     const filteredData = useMemo<IProject[]>(() => {
-        if (!data) return [];
+        if (!data?.data) return [];
 
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        return [...data]
+        // eslint-disable-next-line no-unsafe-optional-chaining
+        return [...data?.data]
             .filter((p) => p.owner.username === paramUserName)
             .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
     }, [data]);
diff --git a/frontend/src/pages/User/List/index.tsx b/frontend/src/pages/User/List/index.tsx
index 368b8dfe94..66d5e2e46f 100644
--- a/frontend/src/pages/User/List/index.tsx
+++ b/frontend/src/pages/User/List/index.tsx
@@ -25,7 +25,7 @@ export const UserList: React.FC = () => {
     const navigate = useNavigate();
     const [pushNotification] = useNotifications();
 
-    const { data, isLoading, refreshList, isLoadingMore } = useInfiniteScroll<IUser, TGetUserListParams>({
+    const { data, isLoading, refreshList, isLoadingMore, totalCount } = useInfiniteScroll<IUser, TGetUserListParams>({
         useLazyQuery: useLazyGetUserListQuery,
         args: { name_pattern: namePattern, limit: DEFAULT_TABLE_PAGE_SIZE },
 
@@ -117,6 +117,12 @@ export const UserList: React.FC = () => {
         return isDeleting || collectionProps.selectedItems?.length !== 1 || userGlobalRole !== 'admin';
     }, [collectionProps.selectedItems]);
 
+    const renderCounter = () => {
+        if (typeof totalCount !== 'number') return '';
+
+        return `(${totalCount})`;
+    };
+
     return (
         <>
             <Table
@@ -134,6 +140,7 @@ export const UserList: React.FC = () => {
                 header={
                     <Header
                         variant="awsui-h1-sticky"
+                        counter={renderCounter()}
                         actions={
                             <SpaceBetween size="xs" direction="horizontal">
                                 <Button formAction="none" onClick={editSelectedUserHandler} disabled={isDisabledEdit}>
diff --git a/frontend/src/services/project.ts b/frontend/src/services/project.ts
index 2663d9697d..56612110dc 100644
--- a/frontend/src/services/project.ts
+++ b/frontend/src/services/project.ts
@@ -23,21 +23,27 @@ export const projectApi = createApi({
     tagTypes: ['Projects', 'NoFleetsProject', 'ProjectRepos', 'ProjectLogs', 'Backends'],
 
     endpoints: (builder) => ({
-        getProjects: builder.query<IProject[], TGetProjectListParams>({
+        getProjects: builder.query<TGetProjectListResponse, TGetProjectListParams>({
             query: (body) => {
                 return {
                     url: API.PROJECTS.LIST(),
                     method: 'POST',
-                    body,
+                    body: {
+                        ...body,
+                        return_total_count: true,
+                    },
                 };
             },
 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            transformResponse: (response: any[]): IProject[] => response.map(transformProjectResponse),
+            transformResponse: (response: any): TGetProjectListResponse => ({
+                ...response,
+                data: response.projects.map(transformProjectResponse),
+            }),
 
             providesTags: (result) =>
                 result
-                    ? [...result.map(({ project_name }) => ({ type: 'Projects' as const, id: project_name })), 'Projects']
+                    ? [...result.data.map(({ project_name }) => ({ type: 'Projects' as const, id: project_name })), 'Projects']
                     : ['Projects'],
         }),
 
diff --git a/frontend/src/services/user.ts b/frontend/src/services/user.ts
index b271107d24..68aa5cb84b 100644
--- a/frontend/src/services/user.ts
+++ b/frontend/src/services/user.ts
@@ -37,17 +37,26 @@ export const userApi = createApi({
             },
         }),
 
-        getUserList: builder.query<IUser[], TGetUserListParams>({
+        getUserList: builder.query<TGetUserListResponse, TGetUserListParams>({
             query: (body) => {
                 return {
                     url: API.USERS.LIST(),
                     method: 'POST',
-                    body,
+                    body: {
+                        ...body,
+                        return_total_count: true,
+                    },
                 };
             },
 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            transformResponse: (response: any): TGetUserListResponse => ({
+                ...response,
+                data: response.users,
+            }),
+
             providesTags: (result) =>
-                result ? [...result.map(({ username }) => ({ type: 'User' as const, id: username })), 'User'] : ['User'],
+                result ? [...result.data.map(({ username }) => ({ type: 'User' as const, id: username })), 'User'] : ['User'],
         }),
 
         getUser: builder.query<IUserWithCreds, { name: IUser['username'] }>({
diff --git a/frontend/src/types/project.d.ts b/frontend/src/types/project.d.ts
index 6885123e33..8853a1a839 100644
--- a/frontend/src/types/project.d.ts
+++ b/frontend/src/types/project.d.ts
@@ -13,6 +13,11 @@ declare type TGetProjectListParams = TBaseRequestListParams & {
     name_pattern?: string;
 };
 
+declare type TGetProjectListResponse = {
+    total_count: number;
+    data: IProject[];
+};
+
 declare type TProjectBackend = {
     name: string;
     config: IBackendAWS | IBackendAzure | IBackendGCP | IBackendLambda | IBackendLocal | IBackendDstack;
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
index 2c27fd1350..d6e1f44ec4 100644
--- a/frontend/src/types/user.d.ts
+++ b/frontend/src/types/user.d.ts
@@ -7,6 +7,11 @@ declare type TGetUserListParams = TBaseRequestListParams & {
     name_pattern?: string;
 };
 
+declare type TGetUserListResponse = {
+    total_count: number;
+    data: IUser[];
+};
+
 declare interface IUserResponseData {
     id: string;
     username: string;

From 127148dd6f7896f07cbb6b317ec6afd25abaead5 Mon Sep 17 00:00:00 2001
From: Oleg Vavilov <vavilovolegik@gmail.com>
Date: Wed, 28 Jan 2026 22:43:23 +0300
Subject: [PATCH 4/4] Showed counters for Project and User List

---
 frontend/src/hooks/useInfiniteScroll.ts | 27 ++++++++++++++++---------
 frontend/src/types/user.d.ts            |  2 ++
 frontend/webpack/dev.js                 |  7 +------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/frontend/src/hooks/useInfiniteScroll.ts b/frontend/src/hooks/useInfiniteScroll.ts
index bed91eba09..b11115d63f 100644
--- a/frontend/src/hooks/useInfiniteScroll.ts
+++ b/frontend/src/hooks/useInfiniteScroll.ts
@@ -33,20 +33,28 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     const [totalCount, setTotalCount] = useState<number | void>();
     const scrollElement = useRef<HTMLElement>(document.documentElement);
     const isLoadingRef = useRef<boolean>(false);
+    const isDisabledMoreRef = useRef<boolean>(false);
     const lastRequestParams = useRef<Args | undefined>(undefined);
-    const [disabledMore, setDisabledMore] = useState(false);
     const { limit, ...argsProp } = args;
     const lastArgsProps = useRef<Partial<Args>>(null);
 
     const [getItems, { isLoading, isFetching }] = useLazyQuery({ ...args } as Args);
 
     const getDataRequest = (params: Args) => {
-        lastRequestParams.current = params;
+        if (isEqual(params, lastRequestParams.current)) {
+            return Promise.reject();
+        }
 
-        return getItems({
+        const request = getItems({
             limit,
             ...params,
         } as Args).unwrap();
+
+        request.then(() => {
+            lastRequestParams.current = { ...params };
+        });
+
+        return request;
     };
 
     const getEmptyList = () => {
@@ -55,7 +63,8 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
         setData([]);
 
         getDataRequest(argsProp as Args).then((result: LazyQueryResponse<DataItem>) => {
-            setDisabledMore(false);
+            // setDisabledMore(false);
+            isDisabledMoreRef.current = false;
 
             if ('data' in result) {
                 setData(result.data as ListResponse<DataItem>);
@@ -77,7 +86,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     }, [argsProp, lastArgsProps, skip]);
 
     const getMore = async () => {
-        if (isLoadingRef.current || disabledMore || skip) {
+        if (isLoadingRef.current || isDisabledMoreRef.current || skip) {
             return;
         }
 
@@ -102,7 +111,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
             if (listResponse.length > 0) {
                 setData((prev) => [...prev, ...listResponse]);
             } else {
-                setDisabledMore(true);
+                isDisabledMoreRef.current = true;
             }
         } catch (e) {
             console.log(e);
@@ -110,7 +119,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
 
         setTimeout(() => {
             isLoadingRef.current = false;
-        }, 10);
+        }, 50);
     };
 
     useLayoutEffect(() => {
@@ -124,7 +133,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
     }, [data]);
 
     const onScroll = useCallback(() => {
-        if (disabledMore || isLoadingRef.current) {
+        if (isDisabledMoreRef.current || isLoadingRef.current) {
             return;
         }
 
@@ -135,7 +144,7 @@ export const useInfiniteScroll = <DataItem, Args extends InfinityListArgs>({
         if (scrollPositionFromBottom < SCROLL_POSITION_GAP) {
             getMore().catch(console.log);
         }
-    }, [disabledMore, getMore]);
+    }, [getMore]);
 
     useEffect(() => {
         document.addEventListener('scroll', onScroll);
diff --git a/frontend/src/types/user.d.ts b/frontend/src/types/user.d.ts
index d6e1f44ec4..cafda2920a 100644
--- a/frontend/src/types/user.d.ts
+++ b/frontend/src/types/user.d.ts
@@ -18,6 +18,8 @@ declare interface IUserResponseData {
     global_role: TUserRole;
     email: string | null;
     permissions: Record<TUserPermissionKeys, boolean>;
+    created_at: string;
+    active: boolean;
 }
 
 declare interface IUser {
diff --git a/frontend/webpack/dev.js b/frontend/webpack/dev.js
index 6c1d510036..a286e77f4c 100644
--- a/frontend/webpack/dev.js
+++ b/frontend/webpack/dev.js
@@ -26,12 +26,7 @@ module.exports = {
             {
                 context: ['/api'],
                 changeOrigin: true,
-                // target: 'http://127.0.0.1:8000',
-                target: 'http://127.0.0.1:3000',
-                // target: 'https://sky.dstack.ai/', //0ab1c6ee-3f7b-4839-a259-5e5c6074a97f
-                // target: 'https://sky-stage.dstack.ai/', //29001ee8-897c-47ea-bfec-819f56835ffe
-                // target: 'https://cloud.dstack.ai/', //0ab1c6ee-3f7b-4839-a259-5e5c6074a97f
-                // target: 'https://08fdfa6f0dd6.ngrok-free.app/',
+                target: 'http://127.0.0.1:8000',
                 logLevel: 'debug',
             },
         ],