Fix: Improve settings layout and models refresh

Refine settings layout for better visual flow, enlarge settings sidebar for easier viewing, and adjust model refresh logic for more responsive updates.

Refactor: Add more visual weight to the settings panel and optimize model refresh logic.

Refactor: Enhance the visual appeal of settings panel by increasing its width and improving model refresh behavior for better user experience.

src/components/Layouts/Header.tsx

@@ -54,7 +54,9 @@ export const Header: React.FC<Props> = ({
   } = useQuery({
     queryKey: ["fetchModel"],
     queryFn: () => fetchChatModels({ returnEmpty: true }),
-    refetchInterval: 15000
+    refetchInterval: 15_000,
+    refetchIntervalInBackground: true,
+    placeholderData: (prev) => prev
   })
 
   const { data: prompts, isLoading: isPromptLoading } = useQuery({
@@ -121,7 +123,7 @@ export const Header: React.FC<Props> = ({
               localStorage.setItem("selectedModel", e)
             }}
             size="large"
-            loading={isModelsLoading || isModelsFetching}
+            loading={isModelsLoading}
             filterOption={(input, option) =>
               option.label.key.toLowerCase().indexOf(input.toLowerCase()) >= 0
             }
@@ -205,9 +207,9 @@ export const Header: React.FC<Props> = ({
             {pathname === "/" &&
               messages.length > 0 &&
               !streaming &&
-              shareModeEnabled && <ShareBtn
-              historyId={historyId}
-              messages={messages} />}
+              shareModeEnabled && (
+                <ShareBtn historyId={historyId} messages={messages} />
+              )}
             <Tooltip title={t("githubRepository")}>
               <a
                 href="https://github.com/n4ze3m/page-assist"