fix: ClusterSettings + Launcher Disable Animations flicker

apps/frontend/src/ui/components/AnimatedRoutes.tsx

@@ -1,7 +1,10 @@
-import { type ParentProps, mergeProps, splitProps } from 'solid-js';
+import { type ParentProps, Show, mergeProps, splitProps } from 'solid-js';
 import { Transition, type TransitionProps } from 'solid-transition-group';
+import useSettingsContext from '~ui/hooks/useSettings';
 
 function AnimatedRoutes(props: TransitionProps & ParentProps) {
+	const settings = useSettingsContext();
+
 	const defaultProps: TransitionProps = {
 		mode: 'outin',
 		enterClass: 'page-animation-enter',
@@ -16,9 +19,17 @@ function AnimatedRoutes(props: TransitionProps & ParentProps) {
 	const merged = mergeProps(defaultProps, rest);
 
 	return (
-		<Transition {...merged}>
-			{split.children}
-		</Transition>
+		<Show
+			when={settings.disable_animations !== true}
+			fallback={(
+				<>{split.children}</>
+			)}
+			children={(
+				<Transition {...merged}>
+					{split.children}
+				</Transition>
+			)}
+		/>
 	);
 }
 

apps/frontend/src/ui/pages/cluster/ClusterRoot.tsx

@@ -11,6 +11,7 @@ import ClusterScreenshots from './ClusterScreenshots';
 import ClusterSettings from './ClusterSettings';
 import ClusterGame from './ClusterGame';
 import useClusterContext, { ClusterProvider } from '~ui/hooks/useCluster';
+import { supportsMods } from '~utils/helpers';
 
 function ClusterRoutes() {
 	return (
@@ -65,8 +66,7 @@ function ClusterSidebar() {
 			links={{
 				Cluster: [
 					[<EyeIcon />, 'Overview', '/'],
-					// TODO: Better way of checking mods
-					(cluster()?.meta.loader !== 'vanilla' ? [<PackagePlusIcon />, 'Mods', '/mods'] : undefined),
+					(supportsMods(cluster()) ? [<PackagePlusIcon />, 'Mods', '/mods'] : undefined),
 					[<Image03Icon />, 'Screenshots', '/screenshots'],
 					[<Globe04Icon />, 'Worlds', '/worlds'],
 					[<File06Icon />, 'Logs', '/logs'],

apps/frontend/src/ui/pages/cluster/ClusterSettings.tsx

@@ -5,7 +5,7 @@ import useSettingsContext from '~ui/hooks/useSettings';
 import SettingsMinecraft from '~ui/pages/settings/game/SettingsMinecraft';
 
 function ClusterSettings() {
-	const cluster = useClusterContext();
+	const [cluster] = useClusterContext();
 	const settings = useSettingsContext();
 
 	// TODO: Save cluster settings
@@ -16,14 +16,14 @@ function ClusterSettings() {
 			<ScrollableContainer>
 				<SettingsMinecraft.Settings
 					fullscreen={{
-						get: cluster.force_fullscreen ?? settings.force_fullscreen ?? false,
-						set: value => cluster.force_fullscreen = value,
-						isGlobal: cluster.force_fullscreen === null,
+						get: cluster()?.force_fullscreen ?? settings.force_fullscreen ?? false,
+						set: value => cluster() && (cluster()!.force_fullscreen = value),
+						isGlobal: cluster()?.force_fullscreen === null,
 					}}
 					resolution={{
-						get: cluster.resolution ?? settings.resolution,
-						set: value => cluster.resolution = value,
-						isGlobal: cluster.resolution === undefined || cluster.resolution === null,
+						get: cluster()?.resolution ?? settings.resolution,
+						set: value => cluster() && (cluster()!.resolution = value),
+						isGlobal: cluster()?.resolution === undefined || cluster()?.resolution === null,
 					}}
 				/>
 			</ScrollableContainer>

apps/frontend/src/ui/pages/settings/SettingsRoot.tsx

@@ -40,7 +40,6 @@ function SettingsRoot(props: ParentProps) {
 			<div class="mt-8 flex flex-col justify-between">
 				<Sidebar
 					base="/settings"
-					state={{}}
 					links={{
 						'Launcher Settings': [
 							[<Rocket02Icon />, 'General', '/'],

apps/frontend/src/ui/pages/settings/launcher/SettingsAppearance.tsx

@@ -1,4 +1,6 @@
 import { ColorsIcon, PaintPourIcon, Speedometer04Icon } from '@untitled-theme/icons-solid';
+import { useBeforeLeave } from '@solidjs/router';
+import { createSignal } from 'solid-js';
 import SettingsRow from '../../../components/SettingsRow';
 import ScrollableContainer from '~ui/components/ScrollableContainer';
 import Button from '~ui/components/base/Button';
@@ -8,6 +10,15 @@ import useSettingsContext from '~ui/hooks/useSettings';
 
 function SettingsAppearance() {
 	const settings = useSettingsContext();
+	const [shouldReload, setShouldReload] = createSignal(false);
+
+	useBeforeLeave((e) => {
+		if (shouldReload()) {
+			e.preventDefault();
+			setShouldReload(false);
+			location.reload();
+		}
+	});
 
 	return (
 		<Sidebar.Page>
@@ -32,7 +43,10 @@ function SettingsAppearance() {
 				>
 					<Toggle
 						defaultChecked={settings.disable_animations ?? false}
-						onChecked={value => settings.disable_animations = value}
+						onChecked={(value) => {
+							settings.disable_animations = value;
+							setShouldReload(true);
+						}}
 					/>
 				</SettingsRow>
 			</ScrollableContainer>

apps/frontend/src/utils/helpers.ts

@@ -1,4 +1,4 @@
-import type { VersionType } from '~bindings';
+import type { Cluster, Loader, VersionType } from '~bindings';
 
 export function formatVersionRelease(release: VersionType): string {
 	const mapping: { [key in VersionType]: string } = {
@@ -11,6 +11,16 @@ export function formatVersionRelease(release: VersionType): string {
 	return mapping[release];
 }
 
+export function supportsMods(loader: Cluster | Loader | undefined): boolean {
+	if (loader === undefined)
+		return false;
+
+	if (typeof loader !== 'string')
+		loader = loader.meta.loader;
+
+	return loader !== 'vanilla';
+}
+
 /**
  * A simple analog of Node.js's `path.join(...)`.
  * https://gist.github.com/creationix/7435851#gistcomment-3698888