Add loading state to the Proxy tab

mullvad · Dec 5, 2023 · 1abf863 · 1abf863
1 parent 01f73c4
commit 1abf863
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/src/components/ProxyStatus/ProxyDisconnectMessage.vue b/src/components/ProxyStatus/ProxyDisconnectMessage.vue
@@ -4,6 +4,7 @@ import useSocksProxy from '@/composables/useSocksProxy';
 
 const { disableGlobalProxy } = useSocksProxy();
 </script>
+
 <template>
   <p>The connection is set to use a proxy server.</p>
   <p>If you can't load any pages, disconnect the proxy to access the internet directly.</p>

diff --git a/src/popup/views/Home.vue b/src/popup/views/Home.vue
@@ -6,7 +6,7 @@ import ConnectionDetails from '@/components/ConnectionDetails/ConnectionDetails.
 
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
 
-const { isLoading } = inject(ConnectionKey) || defaultConnection;
+const { isLoading } = inject(ConnectionKey, defaultConnection);
 </script>
 
 <template>

diff --git a/src/popup/views/Proxy.vue b/src/popup/views/Proxy.vue
@@ -6,11 +6,13 @@ import ProxyGlobal from '@/components/ProxyStatus/ProxyGlobal.vue';
 import ProxyHost from '@/components/ProxyStatus/ProxyHost.vue';
 
 import { ConnectionKey, defaultConnection } from '@/composables/useConnection';
-const { connection } = inject(ConnectionKey) || defaultConnection;
+const { connection, isLoading } = inject(ConnectionKey, defaultConnection);
 </script>
 
 <template>
-  <div v-if="connection.isMullvad">
+  <IconLabel v-if="isLoading" text="Checking connection" type="spinner" />
+
+  <div v-else-if="connection.isMullvad">
     <ProxyGlobal />
     <ProxyHost />
   </div>