From 667d7e5ee2a9ddf2752e295c33ca04a248aababf Mon Sep 17 00:00:00 2001
From: Egor <egor@philippov.ca>
Date: Sat, 20 Sep 2025 22:19:17 -0700
Subject: [PATCH] less jarring initial loading of saved config values on the
 general tab

---
 .../screens/Launch/GeneralTab/index.tsx       | 112 +++++++++++-------
 src/components/screens/Launch/index.tsx       |   2 +-
 2 files changed, 68 insertions(+), 46 deletions(-)

diff --git a/src/components/screens/Launch/GeneralTab/index.tsx b/src/components/screens/Launch/GeneralTab/index.tsx
index a4ce816..f77a852 100644
--- a/src/components/screens/Launch/GeneralTab/index.tsx
+++ b/src/components/screens/Launch/GeneralTab/index.tsx
@@ -1,10 +1,21 @@
-import { Stack, Text, Group, TextInput, Slider } from '@mantine/core';
+import {
+  Stack,
+  Text,
+  Group,
+  TextInput,
+  Slider,
+  Transition,
+} from '@mantine/core';
 import { InfoTooltip } from '@/components/InfoTooltip';
 import { BackendSelector } from '@/components/screens/Launch/GeneralTab/BackendSelector';
 import { ModelFileField } from '@/components/screens/Launch/ModelFileField';
 import { useLaunchConfig } from '@/hooks/useLaunchConfig';
 
-export const GeneralTab = () => {
+interface GeneralTabProps {
+  configLoaded?: boolean;
+}
+
+export const GeneralTab = ({ configLoaded = true }: GeneralTabProps) => {
   const {
     model,
     contextSize,
@@ -14,50 +25,61 @@ export const GeneralTab = () => {
   } = useLaunchConfig();
 
   return (
-    <Stack gap="md">
-      <BackendSelector />
+    <Transition
+      mounted={configLoaded}
+      transition="fade"
+      duration={100}
+      timingFunction="ease-out"
+    >
+      {(styles) => (
+        <Stack gap="md" style={styles}>
+          <BackendSelector />
 
-      <ModelFileField
-        label="Text Model File"
-        value={model}
-        placeholder="Select a .gguf model file or enter a direct URL to file"
-        tooltip="Select a GGUF text generation model file for chat and completion tasks."
-        onChange={handleModelChange}
-        onSelectFile={handleSelectModelFile}
-        showSearchHF
-        searchUrl="https://huggingface.co/models?pipeline_tag=text-generation&library=gguf&sort=trending"
-      />
-
-      <div>
-        <Group justify="space-between" align="center" mb="xs">
-          <Group gap="xs" align="center">
-            <Text size="sm" fw={500}>
-              Context Size
-            </Text>
-            <InfoTooltip label="Controls the memory allocated for maximum context size. The larger the context, the larger the required memory." />
-          </Group>
-          <TextInput
-            value={contextSize?.toString() || ''}
-            onChange={(event) =>
-              handleContextSizeChangeWithStep(Number(event.target.value) || 256)
-            }
-            type="number"
-            min={256}
-            max={131072}
-            step={256}
-            size="sm"
-            w={100}
+          <ModelFileField
+            label="Text Model File"
+            value={model}
+            placeholder="Select a .gguf model file or enter a direct URL to file"
+            tooltip="Select a GGUF text generation model file for chat and completion tasks."
+            onChange={handleModelChange}
+            onSelectFile={handleSelectModelFile}
+            showSearchHF
+            searchUrl="https://huggingface.co/models?pipeline_tag=text-generation&library=gguf&sort=trending"
           />
-        </Group>
-        <Slider
-          value={contextSize}
-          min={256}
-          max={131072}
-          step={1}
-          onChange={handleContextSizeChangeWithStep}
-          style={{ marginBottom: '0.5rem' }}
-        />
-      </div>
-    </Stack>
+
+          <div>
+            <Group justify="space-between" align="center" mb="xs">
+              <Group gap="xs" align="center">
+                <Text size="sm" fw={500}>
+                  Context Size
+                </Text>
+                <InfoTooltip label="Controls the memory allocated for maximum context size. The larger the context, the larger the required memory." />
+              </Group>
+              <TextInput
+                value={contextSize?.toString() || ''}
+                onChange={(event) =>
+                  handleContextSizeChangeWithStep(
+                    Number(event.target.value) || 256
+                  )
+                }
+                type="number"
+                min={256}
+                max={131072}
+                step={256}
+                size="sm"
+                w={100}
+              />
+            </Group>
+            <Slider
+              value={contextSize}
+              min={256}
+              max={131072}
+              step={1}
+              onChange={handleContextSizeChangeWithStep}
+              style={{ marginBottom: '0.5rem' }}
+            />
+          </div>
+        </Stack>
+      )}
+    </Transition>
   );
 };
diff --git a/src/components/screens/Launch/index.tsx b/src/components/screens/Launch/index.tsx
index efe5957..5b3f96d 100644
--- a/src/components/screens/Launch/index.tsx
+++ b/src/components/screens/Launch/index.tsx
@@ -345,7 +345,7 @@ export const LaunchScreen = ({ onLaunch }: LaunchScreenProps) => {
               </Tabs.List>
 
               <Tabs.Panel value="general">
-                <GeneralTab />
+                <GeneralTab configLoaded={configLoaded} />
               </Tabs.Panel>
 
               <Tabs.Panel value="advanced">