From b07647c549a26868af6c27cc6e8c25501c80b3b3 Mon Sep 17 00:00:00 2001
From: YetAnotherZephyruso
 <176294927+YetAnotherZephyruso@users.noreply.github.com>
Date: Sat, 10 Aug 2024 01:33:12 +0800
Subject: [PATCH] fix: flickering issue of the config page under sing-box
 (#900)

---
 src/components/ProxyPreviewBar.tsx |  2 +-
 src/helpers/global.ts              |  4 ----
 src/pages/Config.tsx               | 25 +++++++++++--------------
 src/signals/version.ts             |  9 +++++++++
 4 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 src/signals/version.ts

diff --git a/src/components/ProxyPreviewBar.tsx b/src/components/ProxyPreviewBar.tsx
index 6f68d09..72b506b 100644
--- a/src/components/ProxyPreviewBar.tsx
+++ b/src/components/ProxyPreviewBar.tsx
@@ -41,7 +41,7 @@ export const ProxyPreviewBar = (props: {
 
   return (
     <div class="flex items-center gap-2 py-2">
-      <div class="my-2 flex flex-1 items-center justify-center overflow-hidden rounded-2xl [&>*]:h-2">
+      <div class="my-1 flex flex-1 items-center justify-center overflow-hidden rounded-2xl [&>*]:h-2">
         <div
           class="bg-success"
           style={{
diff --git a/src/helpers/global.ts b/src/helpers/global.ts
index 45c7b0c..5515bc7 100644
--- a/src/helpers/global.ts
+++ b/src/helpers/global.ts
@@ -1,7 +1,3 @@
-export const isSingBox = (version: string) => {
-  return version.includes('sing-box')
-}
-
 export const transformEndpointURL = (url: string) =>
   /^https?:\/\//.test(url) ? url : `${window.location.protocol}//${url}`
 
diff --git a/src/pages/Config.tsx b/src/pages/Config.tsx
index 141cad2..27c2b05 100644
--- a/src/pages/Config.tsx
+++ b/src/pages/Config.tsx
@@ -5,7 +5,6 @@ import { toast } from 'solid-toast'
 import { z } from 'zod'
 import {
   fetchBackendConfigAPI,
-  fetchBackendVersionAPI,
   flushFakeIPDataAPI,
   flushingFakeIPData,
   isUpdateAvailableAPI,
@@ -23,7 +22,6 @@ import {
 } from '~/apis'
 import { Button, ConfigTitle } from '~/components'
 import { LANG, MODE_OPTIONS, ROUTES, themes } from '~/constants'
-import { isSingBox } from '~/helpers'
 import { locale, setLocale, useI18n } from '~/i18n'
 import {
   autoSwitchTheme,
@@ -38,6 +36,11 @@ import {
   useRequest,
   useTwemoji,
 } from '~/signals'
+import {
+  backendVersion,
+  isSingBox,
+  updateBackendVersion,
+} from '~/signals/version'
 import type { DNSQuery } from '~/types'
 
 const dnsQueryFormSchema = z.object({
@@ -109,9 +112,7 @@ const configFormSchema = z.object({
   'mixed-port': z.number(),
 })
 
-const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
-  backendVersion,
-}) => {
+const ConfigForm = () => {
   const [t] = useI18n()
 
   const portList = [
@@ -192,7 +193,7 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
         <option value={MODE_OPTIONS.Direct}>{t('direct')}</option>
       </select>
 
-      <Show when={!isSingBox(backendVersion())}>
+      <Show when={!isSingBox()}>
         <form class="grid grid-cols-3 gap-2 sm:grid-cols-5" use:form={form}>
           <For each={portList}>
             {(item) => (
@@ -344,7 +345,7 @@ const ConfigForm: Component<{ backendVersion: Accessor<string> }> = ({
           {t('restartCore')}
         </Button>
 
-        <Show when={!isSingBox(backendVersion())}>
+        <Show when={!isSingBox()}>
           <Button
             class="btn-secondary"
             loading={updatingGEODatabases()}
@@ -527,15 +528,11 @@ export default () => {
 
   const [t] = useI18n()
 
-  const [backendVersion, setBackendVersion] = createSignal('')
-
-  onMount(async () => {
-    setBackendVersion(await fetchBackendVersionAPI())
-  })
+  updateBackendVersion()
 
   return (
     <div class="mx-auto flex max-w-screen-md flex-col gap-4">
-      <Show when={!isSingBox(backendVersion())}>
+      <Show when={!isSingBox()}>
         <ConfigTitle withDivider>{t('dnsQuery')}</ConfigTitle>
 
         <DNSQueryForm />
@@ -543,7 +540,7 @@ export default () => {
 
       <ConfigTitle withDivider>{t('coreConfig')}</ConfigTitle>
 
-      <ConfigForm backendVersion={backendVersion} />
+      <ConfigForm />
 
       <ConfigTitle withDivider>{t('xdConfig')}</ConfigTitle>
 
diff --git a/src/signals/version.ts b/src/signals/version.ts
new file mode 100644
index 0000000..d820b15
--- /dev/null
+++ b/src/signals/version.ts
@@ -0,0 +1,9 @@
+import { fetchBackendVersionAPI } from '~/apis'
+
+export const [backendVersion, setBackendVersion] = createSignal('')
+export const isSingBox = createMemo(() => {
+  return backendVersion().includes('sing-box')
+})
+export const updateBackendVersion = () => {
+  fetchBackendVersionAPI().then(setBackendVersion)
+}