chore: Suspend SettingsProvider

apps/meteor/client/omnichannel/securityPrivacy/SecurityPrivacyRoute.tsx

@@ -4,7 +4,7 @@ import EditableSettingsProvider from '../../views/admin/settings/EditableSetting
 
 const SecurityPrivacyRoute = () => {
 	return (
-		<SettingsProvider privileged>
+		<SettingsProvider>
 			<EditableSettingsProvider>
 				<SecurityPrivacyPage />
 			</EditableSettingsProvider>

apps/meteor/client/providers/SettingsProvider.tsx

@@ -4,52 +4,30 @@ import { SettingsContext, useAtLeastOnePermission, useMethod } from '@rocket.cha
 import { useQueryClient } from '@tanstack/react-query';
 import { Tracker } from 'meteor/tracker';
 import type { ReactNode } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import { createReactiveSubscriptionFactory } from '../lib/createReactiveSubscriptionFactory';
 import { PrivateSettingsCachedCollection } from '../lib/settings/PrivateSettingsCachedCollection';
 import { PublicSettingsCachedCollection } from '../lib/settings/PublicSettingsCachedCollection';
 
+const settingsManagementPermissions = ['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings'];
+
 type SettingsProviderProps = {
 	children?: ReactNode;
-	privileged?: boolean;
 };
 
-const SettingsProvider = ({ children, privileged = false }: SettingsProviderProps) => {
-	const hasPrivilegedPermission = useAtLeastOnePermission(
-		useMemo(() => ['view-privileged-setting', 'edit-privileged-setting', 'manage-selected-settings'], []),
-	);
-
-	const hasPrivateAccess = privileged && hasPrivilegedPermission;
-
-	const cachedCollection = useMemo(
-		() => (hasPrivateAccess ? PrivateSettingsCachedCollection : PublicSettingsCachedCollection),
-		[hasPrivateAccess],
-	);
-
-	const [isLoading, setLoading] = useState(() => Tracker.nonreactive(() => !cachedCollection.ready.get()));
-
-	useEffect(() => {
-		let mounted = true;
-
-		const initialize = async (): Promise<void> => {
-			if (!Tracker.nonreactive(() => cachedCollection.ready.get())) {
-				await cachedCollection.init();
-			}
+const SettingsProvider = ({ children }: SettingsProviderProps) => {
+	const canManageSettings = useAtLeastOnePermission(settingsManagementPermissions);
 
-			if (!mounted) {
-				return;
-			}
+	const cachedCollection = canManageSettings ? PrivateSettingsCachedCollection : PublicSettingsCachedCollection;
 
-			setLoading(false);
-		};
+	const isLoading = Tracker.nonreactive(() => !cachedCollection.ready.get());
 
-		initialize();
-
-		return (): void => {
-			mounted = false;
-		};
-	}, [cachedCollection]);
+	if (isLoading) {
+		throw (async () => {
+			await cachedCollection.init();
+		})();
+	}
 
 	const querySetting = useMemo(
 		() =>
@@ -108,19 +86,15 @@ const SettingsProvider = ({ children, privileged = false }: SettingsProviderProp
 
 	const contextValue = useMemo<SettingsContextValue>(
 		() => ({
-			hasPrivateAccess,
-			isLoading,
+			hasPrivateAccess: canManageSettings,
 			querySetting,
 			querySettings,
 			dispatch,
 		}),
-		[hasPrivateAccess, isLoading, querySetting, querySettings, dispatch],
+		[canManageSettings, querySetting, querySettings, dispatch],
 	);
 
 	return <SettingsContext.Provider children={children} value={contextValue} />;
 };
 
 export default SettingsProvider;
-
-// '[subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => {}]'
-// '[subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => ISetting | undefined]'

apps/meteor/client/sidebar/Sidebar.stories.tsx

@@ -31,7 +31,6 @@ const settings: Record<string, ISetting> = {
 
 const settingContextValue: ContextType<typeof SettingsContext> = {
 	hasPrivateAccess: true,
-	isLoading: false,
 	querySetting: (_id) => [() => () => undefined, () => settings[_id]],
 	querySettings: () => [() => () => undefined, () => []],
 	dispatch: async () => undefined,

apps/meteor/client/sidebarv2/Sidebar.stories.tsx

@@ -31,7 +31,6 @@ const settings: Record<string, ISetting> = {
 
 const settingContextValue: ContextType<typeof SettingsContext> = {
 	hasPrivateAccess: true,
-	isLoading: false,
 	querySetting: (_id) => [() => () => undefined, () => settings[_id]],
 	querySettings: () => [() => () => undefined, () => []],
 	dispatch: async () => undefined,

apps/meteor/client/views/account/AccountSidebar.tsx

@@ -16,7 +16,7 @@ const AccountSidebar = () => {
 
 	// TODO: uplift this provider
 	return (
-		<SettingsProvider privileged>
+		<SettingsProvider>
 			<Sidebar>
 				<Sidebar.Header onClose={sidebar.close} title={t('Account')} />
 				<Sidebar.Content>

apps/meteor/client/views/admin/AdministrationRouter.tsx

@@ -49,9 +49,7 @@ const AdministrationRouter = ({ children }: AdministrationRouterProps): ReactEle
 
 	return (
 		<AdministrationLayout>
-			<SettingsProvider privileged>
-				{children ? <Suspense fallback={<PageSkeleton />}>{children}</Suspense> : <PageSkeleton />}
-			</SettingsProvider>
+			<SettingsProvider>{children ? <Suspense fallback={<PageSkeleton />}>{children}</Suspense> : <PageSkeleton />}</SettingsProvider>
 		</AdministrationLayout>
 	);
 };

apps/meteor/client/views/admin/featurePreview/AdminFeaturePreviewRoute.tsx

@@ -15,7 +15,7 @@ const AdminFeaturePreviewRoute = (): ReactElement => {
 	}
 
 	return (
-		<SettingsProvider privileged>
+		<SettingsProvider>
 			<EditableSettingsProvider>
 				<AdminFeaturePreviewPage />
 			</EditableSettingsProvider>

apps/meteor/client/views/admin/settings/SettingsPage.tsx

@@ -1,7 +1,6 @@
-import { Icon, SearchInput, Skeleton, CardGrid } from '@rocket.chat/fuselage';
+import { Icon, SearchInput, CardGrid } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
-import { useIsSettingsContextLoading } from '@rocket.chat/ui-contexts';
 import type { ChangeEvent, ReactElement } from 'react';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -18,7 +17,6 @@ const SettingsPage = (): ReactElement => {
 	const handleChange = useCallback((e: ChangeEvent<HTMLInputElement>) => setFilter(e.currentTarget.value), []);
 
 	const groups = useSettingsGroups(useDebouncedValue(filter, 400));
-	const isLoadingGroups = useIsSettingsContextLoading();
 
 	return (
 		<Page background='tint'>
@@ -28,7 +26,6 @@ const SettingsPage = (): ReactElement => {
 			</PageBlockWithBorder>
 
 			<PageScrollableContentWithShadow p={0} mi={24} mbe={16}>
-				{isLoadingGroups && <Skeleton />}
 				<CardGrid
 					breakpoints={{
 						xs: 4,
@@ -39,8 +36,7 @@ const SettingsPage = (): ReactElement => {
 						p: 8,
 					}}
 				>
-					{!isLoadingGroups &&
-						!!groups.length &&
+					{!!groups.length &&
 						groups.map((group) => (
 							<SettingsGroupCard
 								key={group._id}
@@ -51,7 +47,7 @@ const SettingsPage = (): ReactElement => {
 						))}
 				</CardGrid>
 
-				{!isLoadingGroups && !groups.length && <GenericNoResults />}
+				{!groups.length && <GenericNoResults />}
 			</PageScrollableContentWithShadow>
 		</Page>
 	);

apps/meteor/client/views/admin/sidebar/AdminSidebar.tsx

@@ -15,7 +15,7 @@ const AdminSidebar = () => {
 
 	// TODO: uplift this provider
 	return (
-		<SettingsProvider privileged>
+		<SettingsProvider>
 			<Sidebar>
 				<Sidebar.Header
 					onClose={sidebar.close}

apps/meteor/client/views/marketplace/MarketplaceSidebar.tsx

@@ -16,7 +16,7 @@ const MarketplaceSidebar = (): ReactElement => {
 	const currentPath = useCurrentRoutePath();
 
 	return (
-		<SettingsProvider privileged>
+		<SettingsProvider>
 			<Sidebar>
 				<Sidebar.Header onClose={sidebar.close} title={t('Marketplace')} />
 				<Sidebar.Content>

apps/meteor/client/views/omnichannel/sidebar/OmnichannelSidebar.tsx

@@ -15,7 +15,7 @@ const OmnichannelSidebar = () => {
 	const currentPath = useCurrentRoutePath();
 
 	return (
-		<SettingsProvider privileged>
+		<SettingsProvider>
 			<Sidebar>
 				<Sidebar.Header onClose={sidebar.close} title={t('Omnichannel')} />
 				<Sidebar.Content>

packages/mock-providers/src/MockedAppRootBuilder.tsx

@@ -92,7 +92,6 @@ export class MockedAppRootBuilder {
 
 	private settings: Mutable<ContextType<typeof SettingsContext>> = {
 		hasPrivateAccess: true,
-		isLoading: false,
 		querySetting: (_id: string) => [() => () => undefined, () => undefined],
 		querySettings: () => [() => () => undefined, () => []],
 		dispatch: async () => undefined,

packages/mock-providers/src/MockedSettingsContext.tsx

@@ -4,7 +4,6 @@ import type { ContextType, ReactNode } from 'react';
 
 const settingContextValue: ContextType<typeof SettingsContext> = {
 	hasPrivateAccess: true,
-	isLoading: false,
 	querySetting: (_id: string) => [() => () => undefined, () => undefined],
 	querySettings: () => [() => () => undefined, () => []],
 	dispatch: async () => undefined,

packages/ui-client/src/components/Header/Header.stories.tsx

@@ -40,7 +40,6 @@ export default {
 			<SettingsContext.Provider
 				value={{
 					hasPrivateAccess: true,
-					isLoading: false,
 					querySetting: (_id) => [
 						() => () => undefined,
 						() => ({

packages/ui-client/src/components/HeaderV2/Header.stories.tsx

@@ -41,7 +41,6 @@ export default {
 			<SettingsContext.Provider
 				value={{
 					hasPrivateAccess: true,
-					isLoading: false,
 					querySetting: (_id) => [
 						() => () => undefined,
 						() => ({

packages/ui-contexts/src/SettingsContext.ts

@@ -10,7 +10,6 @@ export type SettingsContextQuery = {
 
 export type SettingsContextValue = {
 	readonly hasPrivateAccess: boolean;
-	readonly isLoading: boolean;
 	readonly querySetting: (
 		_id: ISetting['_id'],
 	) => [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => ISetting | undefined];
@@ -22,7 +21,6 @@ export type SettingsContextValue = {
 
 export const SettingsContext = createContext<SettingsContextValue>({
 	hasPrivateAccess: false,
-	isLoading: false,
 	querySetting: () => [(): (() => void) => (): void => undefined, (): undefined => undefined],
 	querySettings: () => [(): (() => void) => (): void => undefined, (): ISetting[] => []],
 	dispatch: async () => undefined,

packages/ui-contexts/src/index.ts

@@ -33,7 +33,6 @@ export { useEndpoint } from './hooks/useEndpoint';
 export { useGoToRoom } from './hooks/useGoToRoom';
 export type { EndpointFunction } from './hooks/useEndpoint';
 export { useIsPrivilegedSettingsContext } from './hooks/useIsPrivilegedSettingsContext';
-export { useIsSettingsContextLoading } from './hooks/useIsSettingsContextLoading';
 export { useLanguage } from './hooks/useLanguage';
 export { useLanguages } from './hooks/useLanguages';
 export { useLayout } from './hooks/useLayout';