Load proxies only when visiting the proxy view

Author: ruihildt

src/popup/App.vue

@@ -1,24 +1,15 @@
 <script lang="ts" setup>
-import { provide, onMounted } from 'vue';
+import { provide } from 'vue';
 import { useQueryProvider } from 'vue-query';
 import { NConfigProvider, GlobalThemeOverrides, darkTheme } from 'naive-ui';
 
 import Popup from '@/popup/Popup.vue';
-
 import useConnection, { ConnectionKey } from '@/composables/useConnection';
-import useListProxies from '@/composables/useListProxies';
 
 const { isLoading, connection, isError } = useConnection();
-const { getSocksProxies } = useListProxies();
 
 provide(ConnectionKey, { connection, isLoading, isError });
 
-const loadProxies = async () => {
-  await getSocksProxies();
-};
-
-onMounted(loadProxies);
-
 useQueryProvider();
 const themeOverrides: GlobalThemeOverrides = {
   common: {

src/popup/views/Proxy.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject } from 'vue';
+import { computed, inject, onMounted } from 'vue';
 
 import IconLabel from '@/components/IconLabel.vue';
 import LocationDrawer from '@/components/ConnectionDetails/LocationDrawer.vue';
@@ -8,15 +8,24 @@ import ProxyHost from '@/components/Proxy/ProxyHost.vue';
 
 import useActiveTab from '@/composables/useActiveTab';
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
+import useListProxies from '@/composables/useListProxies';
 
 const { isAboutPage } = useActiveTab();
+const { getSocksProxies } = useListProxies();
+
 const { connection } = inject(ConnectionKey, defaultConnection);
 
 const isWireGuard = computed(
   () =>
     connection.value.protocol === 'WireGuard' ||
     connection.value.protocol === 'SOCKS through WireGuard',
 );
+
+const loadProxies = async () => {
+  await getSocksProxies();
+};
+
+onMounted(loadProxies);
 </script>
 
 <template>