fix: Render issue on traffic update

Author: geekdada

src/hooks/useTrafficUpdater/useTrafficUpdater.ts

@@ -1,7 +1,6 @@
 import { useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import dayjs from 'dayjs'
-import useSWR from 'swr'
 
 import { useAppDispatch, useProfile } from '@/store'
 import { trafficActions } from '@/store/slices/traffic'
@@ -17,67 +16,64 @@ const useTrafficUpdater = () => {
 
   const isInForeground =
     location.pathname === '/traffic' || location.pathname === '/home'
-  const { data: traffic } = useSWR(
-    profile !== undefined ? '/traffic' : null,
-    (url) =>
-      fetcher<Traffic & { nowTime: number }>({ url }).then((res) => {
-        res.nowTime = Date.now()
-        return res
-      }),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      refreshWhenHidden: true,
-      refreshInterval: isInForeground ? REFRESH_RATE : 0,
-      dedupingInterval: isInForeground ? REFRESH_RATE : 0,
-    },
-  )
 
   useEffect(() => {
-    if (!traffic) return undefined
+    if (profile === undefined) return
 
-    const now = Date.now()
+    const fetchTraffic = () => {
+      fetcher<Traffic & { nowTime: number }>({ url: '/traffic' }).then(
+        (res) => {
+          res.nowTime = Date.now()
+          dispatch(trafficActions.updateConnector(res.connector))
+          dispatch(trafficActions.updateInterface(res.interface))
+          dispatch(
+            trafficActions.updateStartTime(
+              dayjs.unix(res.startTime).toDate().getTime(),
+            ),
+          )
 
-    dispatch(trafficActions.updateConnector(traffic.connector))
+          const aggregation: ConnectorTraffic = {
+            outCurrentSpeed: 0,
+            in: 0,
+            inCurrentSpeed: 0,
+            outMaxSpeed: 0,
+            out: 0,
+            inMaxSpeed: 0,
+          }
 
-    dispatch(trafficActions.updateInterface(traffic.interface))
+          for (const name in res.interface) {
+            const conn = res.interface[name]
+            aggregation.in += conn.in
+            aggregation.out += conn.out
+            aggregation.outCurrentSpeed += conn.outCurrentSpeed
+            aggregation.inCurrentSpeed += conn.inCurrentSpeed
+          }
 
-    dispatch(
-      trafficActions.updateStartTime(
-        dayjs.unix(traffic.startTime).toDate().getTime(),
-      ),
-    )
-
-    const aggregation: ConnectorTraffic = {
-      outCurrentSpeed: 0,
-      in: 0,
-      inCurrentSpeed: 0,
-      outMaxSpeed: 0,
-      out: 0,
-      inMaxSpeed: 0,
+          const now = Date.now()
+          dispatch(
+            trafficActions.updateHistory({
+              up: {
+                x: now,
+                y: aggregation.outCurrentSpeed,
+              },
+              down: {
+                x: now,
+                y: aggregation.inCurrentSpeed,
+              },
+            }),
+          )
+        },
+      )
     }
 
-    for (const name in traffic.interface) {
-      const conn = traffic.interface[name]
-      aggregation.in += conn.in
-      aggregation.out += conn.out
-      aggregation.outCurrentSpeed += conn.outCurrentSpeed
-      aggregation.inCurrentSpeed += conn.inCurrentSpeed
-    }
+    const intervalId = setInterval(() => {
+      if (isInForeground) {
+        fetchTraffic()
+      }
+    }, REFRESH_RATE)
 
-    dispatch(
-      trafficActions.updateHistory({
-        up: {
-          x: now,
-          y: aggregation.outCurrentSpeed,
-        },
-        down: {
-          x: now,
-          y: aggregation.inCurrentSpeed,
-        },
-      }),
-    )
-  }, [dispatch, traffic])
+    return () => clearInterval(intervalId)
+  }, [dispatch, profile, isInForeground])
 
   return undefined
 }

src/pages/Devices/components/DeviceSettingsModal.tsx

@@ -191,16 +191,16 @@ const DeviceSettingsModal = ({
             />
 
             <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="outline">{t('common.cancel')}</Button>
-              </DialogClose>
               <Button
                 isLoading={isLoading}
                 type="submit"
                 loadingLabel={t('common.is_loading')}
               >
                 {t('common.save')}
               </Button>
+              <DialogClose asChild className="md:hidden">
+                <Button variant="outline">{t('common.cancel')}</Button>
+              </DialogClose>
             </DialogFooter>
           </form>
         </Form>

src/pages/Home/components/SetHostModal.tsx

@@ -101,14 +101,14 @@ const SetHostModal: React.FC = () => {
         </div>
 
         <DialogFooter>
+          <Button onClick={() => onAddNewProfile()}>
+            {t('landing.add_new_host')}
+          </Button>
           <DialogClose asChild className="md:hidden">
             <Button autoFocus variant="outline">
               {t('common.close')}
             </Button>
           </DialogClose>
-          <Button onClick={() => onAddNewProfile()}>
-            {t('landing.add_new_host')}
-          </Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>

src/router/router.tsx

@@ -7,7 +7,7 @@ import {
 
 import App from '@/App'
 import AppContainer from '@/AppContainer'
-import ErrorBoundary from '@/components/ErrorBoundary'
+import { ErrorBoundary } from '@/components/ErrorBoundary'
 
 import { RouterContext } from './context'
 

yarn.lock

@@ -3590,12 +3590,12 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^22":
-  version "22.9.4"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.9.4.tgz#31eefcdbe163a51f53cbfbb3e121b8ae9b16fdb2"
-  integrity sha512-d9RWfoR7JC/87vj7n+PVTzGg9hDyuFjir3RxUHbjFSKNd9mpxbxwMEyaCim/ddCmy4IuW7HjTzF3g9p3EtWEOg==
+"@types/node@^20":
+  version "20.17.9"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.17.9.tgz#5f141d4b7ee125cdee5faefe28de095398865bab"
+  integrity sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==
   dependencies:
-    undici-types "~6.19.8"
+    undici-types "~6.19.2"
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.4"
@@ -13398,7 +13398,7 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
-undici-types@~6.19.8:
+undici-types@~6.19.2, undici-types@~6.19.8:
   version "6.19.8"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
   integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==