regression: workspace stats cache loading (#30884)

apps/meteor/client/hooks/useWorkspaceInfo.ts

@@ -3,7 +3,7 @@ import type { IInstance } from '@rocket.chat/rest-typings';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query';
 
-export const useWorkspaceInfo = () => {
+export const useWorkspaceInfo = ({ refreshStatistics }: { refreshStatistics?: boolean } = {}) => {
 	const getStatistics = useEndpoint('GET', '/v1/statistics');
 	const getInstances = useEndpoint('GET', '/v1/instances.get');
 	const getServerInfo = useEndpoint('GET', '/info');
@@ -49,7 +49,7 @@ export const useWorkspaceInfo = () => {
 			},
 			{
 				queryKey: ['info', 'statistics'],
-				queryFn: () => getStatistics({ refresh: 'true' }),
+				queryFn: () => getStatistics({ refresh: refreshStatistics ? 'true' : 'false' }),
 				staleTime: Infinity,
 				keepPreviousData: true,
 				select: (data: Serialized<IStats>) => ({

apps/meteor/client/views/admin/workspace/WorkspacePage.tsx

@@ -15,6 +15,7 @@ type WorkspaceStatusPageProps = {
 	canViewStatistics: boolean;
 	serverInfo: IWorkspaceInfo;
 	statistics: IStats;
+	statisticsIsLoading: boolean;
 	instances: IInstance[];
 	onClickRefreshButton: () => void;
 	onClickDownloadInfo: () => void;
@@ -24,6 +25,7 @@ const WorkspacePage = ({
 	canViewStatistics,
 	serverInfo,
 	statistics,
+	statisticsIsLoading,
 	instances,
 	onClickRefreshButton,
 	onClickDownloadInfo,
@@ -40,10 +42,8 @@ const WorkspacePage = ({
 			<Page.Header title={t('Workspace')}>
 				{canViewStatistics && (
 					<ButtonGroup>
-						<Button type='button' onClick={onClickDownloadInfo}>
-							{t('Download_Info')}
-						</Button>
-						<Button type='button' onClick={onClickRefreshButton}>
+						<Button onClick={onClickDownloadInfo}>{t('Download_Info')}</Button>
+						<Button onClick={onClickRefreshButton} loading={statisticsIsLoading}>
 							{t('Refresh')}
 						</Button>
 					</ButtonGroup>

apps/meteor/client/views/admin/workspace/WorkspaceRoute.tsx

@@ -1,11 +1,11 @@
 import { Callout, ButtonGroup, Button } from '@rocket.chat/fuselage';
 import { usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 
 import Page from '../../../components/Page';
 import PageSkeleton from '../../../components/PageSkeleton';
-import { useRefreshStatistics, useWorkspaceInfo } from '../../../hooks/useWorkspaceInfo';
+import { useWorkspaceInfo } from '../../../hooks/useWorkspaceInfo';
 import { downloadJsonAs } from '../../../lib/download';
 import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
 import WorkspacePage from './WorkspacePage';
@@ -14,8 +14,8 @@ const WorkspaceRoute = (): ReactElement => {
 	const t = useTranslation();
 	const canViewStatistics = usePermission('view-statistics');
 
-	const [serverInfoQuery, instancesQuery, statisticsQuery] = useWorkspaceInfo();
-	const refetchStatistics = useRefreshStatistics();
+	const [refreshStatistics, setRefreshStatistics] = useState(false);
+	const [serverInfoQuery, instancesQuery, statisticsQuery] = useWorkspaceInfo({ refreshStatistics });
 
 	if (!canViewStatistics) {
 		return <NotAuthorizedPage />;
@@ -24,8 +24,10 @@ const WorkspaceRoute = (): ReactElement => {
 	if (serverInfoQuery.isLoading || instancesQuery.isLoading || statisticsQuery.isLoading) {
 		return <PageSkeleton />;
 	}
-	const handleClickRefreshButton = (): void => {
-		refetchStatistics.mutate();
+
+	const handleClickRefreshButton = async () => {
+		setRefreshStatistics(true);
+		statisticsQuery.refetch();
 	};
 
 	if (serverInfoQuery.isError || instancesQuery.isError || statisticsQuery.isError) {
@@ -33,7 +35,7 @@ const WorkspaceRoute = (): ReactElement => {
 			<Page>
 				<Page.Header title={t('Workspace')}>
 					<ButtonGroup>
-						<Button icon='reload' primary type='button' onClick={handleClickRefreshButton}>
+						<Button icon='reload' primary type='button' onClick={handleClickRefreshButton} loading={statisticsQuery.isLoading}>
 							{t('Refresh')}
 						</Button>
 					</ButtonGroup>
@@ -54,6 +56,7 @@ const WorkspaceRoute = (): ReactElement => {
 			canViewStatistics={canViewStatistics}
 			serverInfo={serverInfoQuery.data}
 			statistics={statisticsQuery.data}
+			statisticsIsLoading={statisticsQuery.isLoading}
 			instances={instancesQuery.data}
 			onClickRefreshButton={handleClickRefreshButton}
 			onClickDownloadInfo={handleClickDownloadInfo}