Wrap components with React.memo (#17899)

app/ui-utils/client/lib/SideNav.js

@@ -123,7 +123,6 @@ export const SideNav = new class {
 		if (this.animating === true) {
 			return;
 		}
-		AccountBox.close();
 		this.toggleFlex(1, callback);
 		return this.focusInput();
 	}

client/admin/AdministrationRouter.js

@@ -6,14 +6,13 @@ import PageSkeleton from './PageSkeleton';
 
 function AdministrationRouter({ lazyRouteComponent, ...props }) {
 	const LazyRouteComponent = useMemo(() => lazy(lazyRouteComponent), [lazyRouteComponent]);
-
-	return <PrivilegedSettingsProvider>
-		<AdministrationLayout>
+	return <AdministrationLayout>
+		<PrivilegedSettingsProvider>
 			<Suspense fallback={<PageSkeleton />}>
 				<LazyRouteComponent {...props} />
 			</Suspense>
-		</AdministrationLayout>
-	</PrivilegedSettingsProvider>;
+		</PrivilegedSettingsProvider>
+	</AdministrationLayout>;
 }
 
 export default AdministrationRouter;

client/admin/PrivilegedSettingsProvider.js

@@ -133,7 +133,7 @@ function AuthorizedPrivilegedSettingsProvider({ cachedCollection, children }) {
 				clearTimeout(addedActionTimer);
 				addedActionTimer = setTimeout(() => {
 					dispatch({ type: 'add', payload: addedQueue });
-				}, 70);
+				}, 300);
 			},
 			changed: (data) => {
 				dispatch({ type: 'change', payload: data });

client/admin/info/BuildEnvironmentSection.js

@@ -5,7 +5,7 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
 import { DescriptionList } from './DescriptionList';
 
-export function BuildEnvironmentSection({ info }) {
+export const BuildEnvironmentSection = React.memo(function BuildEnvironmentSection({ info }) {
 	const t = useTranslation();
 	const formatDateAndTime = useFormatDateAndTime();
 	const build = info && (info.compile || info.build);
@@ -20,4 +20,4 @@ export function BuildEnvironmentSection({ info }) {
 		<DescriptionList.Entry label={t('Node_version')}>{build.nodeVersion}</DescriptionList.Entry>
 		<DescriptionList.Entry label={t('Date')}>{formatDateAndTime(build.date)}</DescriptionList.Entry>
 	</DescriptionList>;
-}
+});

client/admin/info/CommitSection.js

@@ -4,7 +4,7 @@ import Subtitle from '../../components/basic/Subtitle';
 import { useTranslation } from '../../contexts/TranslationContext';
 import { DescriptionList } from './DescriptionList';
 
-export function CommitSection({ info }) {
+export const CommitSection = React.memo(function CommitSection({ info }) {
 	const t = useTranslation();
 	const { commit = {} } = info;
 
@@ -19,4 +19,4 @@ export function CommitSection({ info }) {
 		<DescriptionList.Entry label={t('Author')}>{commit.author}</DescriptionList.Entry>
 		<DescriptionList.Entry label={t('Subject')}>{commit.subject}</DescriptionList.Entry>
 	</DescriptionList>;
-}
+});

client/admin/info/DescriptionList.js

@@ -3,7 +3,7 @@ import React from 'react';
 
 const style = { wordBreak: 'break-word' };
 
-export const DescriptionList = ({ children, title, ...props }) => <>
+export const DescriptionList = React.memo(({ children, title, ...props }) => <>
 	{title && <Box display='flex' justifyContent='flex-end' width='30%' paddingInline='x8'>
 		{title}
 	</Box>}
@@ -12,7 +12,7 @@ export const DescriptionList = ({ children, title, ...props }) => <>
 			{children}
 		</Table.Body>
 	</Table>
-</>;
+</>);
 
 const Entry = ({ children, label, ...props }) =>
 	<Table.Row {...props}>
@@ -20,4 +20,4 @@ const Entry = ({ children, label, ...props }) =>
 		<Table.Cell width='70%' align='start' color='default' style={style}>{children}</Table.Cell>
 	</Table.Row>;
 
-DescriptionList.Entry = Entry;
+DescriptionList.Entry = React.memo(Entry);

client/admin/info/InformationPage.js

@@ -10,7 +10,7 @@ import { BuildEnvironmentSection } from './BuildEnvironmentSection';
 import { UsageSection } from './UsageSection';
 import { InstancesSection } from './InstancesSection';
 
-export function InformationPage({
+export const InformationPage = React.memo(function InformationPage({
 	canViewStatistics,
 	isLoading,
 	info,
@@ -72,4 +72,4 @@ export function InformationPage({
 			</Box>
 		</Page.ScrollableContentWithShadow>
 	</Page>;
-}
+});

client/admin/info/InformationRoute.js

@@ -5,7 +5,7 @@ import { useMethod, useServerInformation, useEndpoint } from '../../contexts/Ser
 import { downloadJsonAsAFile } from '../../helpers/download';
 import { InformationPage } from './InformationPage';
 
-export function InformationRoute() {
+export const InformationRoute = React.memo(function InformationRoute() {
 	const canViewStatistics = usePermission('view-statistics');
 
 	const [isLoading, setLoading] = useState(true);
@@ -78,6 +78,6 @@ export function InformationRoute() {
 		onClickRefreshButton={handleClickRefreshButton}
 		onClickDownloadInfo={handleClickDownloadInfo}
 	/>;
-}
+});
 
 export default InformationRoute;

client/admin/info/RocketChatSection.js

@@ -7,7 +7,7 @@ import { useFormatDateAndTime } from '../../hooks/useFormatDateAndTime';
 import { useFormatDuration } from '../../hooks/useFormatDuration';
 import { DescriptionList } from './DescriptionList';
 
-export function RocketChatSection({ info, statistics, isLoading }) {
+export const RocketChatSection = React.memo(function RocketChatSection({ info, statistics, isLoading }) {
 	const t = useTranslation();
 	const formatDateAndTime = useFormatDateAndTime();
 	const formatDuration = useFormatDuration();
@@ -31,4 +31,4 @@ export function RocketChatSection({ info, statistics, isLoading }) {
 		<DescriptionList.Entry label={t('Running_Instances')}>{s(() => statistics.instanceCount)}</DescriptionList.Entry>
 		<DescriptionList.Entry label={t('OpLog')}>{s(() => (statistics.oplogEnabled ? t('Enabled') : t('Disabled')))}</DescriptionList.Entry>
 	</DescriptionList>;
-}
+});

client/admin/info/RuntimeEnvironmentSection.js

@@ -17,7 +17,7 @@ const formatCPULoad = (load) => {
 	return `${ s.numberFormat(oneMinute, 2) }, ${ s.numberFormat(fiveMinutes, 2) }, ${ s.numberFormat(fifteenMinutes, 2) }`;
 };
 
-export function RuntimeEnvironmentSection({ statistics, isLoading }) {
+export const RuntimeEnvironmentSection = React.memo(function RuntimeEnvironmentSection({ statistics, isLoading }) {
 	const s = (fn) => (isLoading ? <Skeleton width='50%' /> : fn());
 	const t = useTranslation();
 	const formatMemorySize = useFormatMemorySize();
@@ -40,4 +40,4 @@ export function RuntimeEnvironmentSection({ statistics, isLoading }) {
 		<DescriptionList.Entry label={t('OS_Freemem')}>{s(() => formatMemorySize(statistics.os.freemem))}</DescriptionList.Entry>
 		<DescriptionList.Entry label={t('OS_Cpus')}>{s(() => statistics.os.cpus.length)}</DescriptionList.Entry>
 	</DescriptionList>;
-}
+});

client/admin/info/UsageSection.js

@@ -6,7 +6,7 @@ import { useTranslation } from '../../contexts/TranslationContext';
 import { useFormatMemorySize } from '../../hooks/useFormatMemorySize';
 import { DescriptionList } from './DescriptionList';
 
-export function UsageSection({ statistics, isLoading }) {
+export const UsageSection = React.memo(function UsageSection({ statistics, isLoading }) {
 	const s = (fn) => (isLoading ? <Skeleton width='50%' /> : fn());
 	const formatMemorySize = useFormatMemorySize();
 	const t = useTranslation();
@@ -49,4 +49,4 @@ export function UsageSection({ statistics, isLoading }) {
 		<DescriptionList.Entry label={t('Stats_Total_Active_Outgoing_Integrations')}>{s(() => statistics.integrations.totalOutgoingActive)}</DescriptionList.Entry>
 		<DescriptionList.Entry label={t('Stats_Total_Integrations_With_Script_Enabled')}>{s(() => statistics.integrations.totalWithScriptEnabled)}</DescriptionList.Entry>
 	</DescriptionList>;
-}
+});

client/admin/sidebar/AdminSidebar.js

@@ -71,13 +71,13 @@ const SidebarItemsAssembler = React.memo(({ items, currentPath }) => {
 	/>);
 });
 
-const AdminSidebarPages = ({ currentPath }) => {
+const AdminSidebarPages = React.memo(({ currentPath }) => {
 	const items = useReactiveValue(() => sidebarItems.get());
 
 	return <Box display='flex' flexDirection='column' flexShrink={0} pb='x8'>
 		<SidebarItemsAssembler items={items} currentPath={currentPath}/>
 	</Box>;
-};
+});
 
 const AdminSidebarSettings = ({ currentPath }) => {
 	const t = useTranslation();
@@ -113,7 +113,7 @@ const AdminSidebarSettings = ({ currentPath }) => {
 	</Box>;
 };
 
-export default function AdminSidebar() {
+export default React.memo(function AdminSidebar() {
 	const t = useTranslation();
 
 	const canViewSettings = useAtLeastOnePermission(['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings']);
@@ -151,4 +151,4 @@ export default function AdminSidebar() {
 			</Scrollable>
 		</Box>
 	</PrivilegedSettingsProvider>;
-}
+});