diff --git a/client/src/components/Panels/ToolPanel.vue b/client/src/components/Panels/ToolPanel.vue
index 6c43bb775c79..ed166d8fc29b 100644
--- a/client/src/components/Panels/ToolPanel.vue
+++ b/client/src/components/Panels/ToolPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { storeToRefs } from "pinia";
-import { ref, watch, watchEffect } from "vue";
+import { ref, watch } from "vue";
 
 import { useConfig } from "@/composables/config";
 import { useToolStore } from "@/stores/toolStore";
@@ -41,17 +41,36 @@ watch(
     }
 );
 
-watchEffect(async () => {
-    if (isConfigLoaded.value) {
-        panelViews.value = config.value.panel_views;
-        try {
-            await toolStore.fetchTools();
-            await toolStore.initCurrentPanelView(config.value.default_panel_view);
-        } catch (error: any) {
-            console.error("ToolPanel - Load tools error:", error);
+// as soon as config is loaded, load tools
+watch(
+    () => isConfigLoaded.value,
+    async (newVal) => {
+        if (newVal) {
+            await loadTools();
+        }
+    },
+    { immediate: true }
+);
+
+// if currentPanelView ever becomes null || "", load tools
+watch(
+    () => currentPanelView.value,
+    async (newVal) => {
+        if (!newVal && isConfigLoaded.value) {
+            await loadTools();
         }
     }
-});
+);
+
+async function loadTools() {
+    panelViews.value = panelViews.value === null ? config.value.panel_views : panelViews.value;
+    try {
+        await toolStore.fetchTools();
+        await toolStore.initCurrentPanelView(config.value.default_panel_view);
+    } catch (error: any) {
+        console.error("ToolPanel - Load tools error:", error);
+    }
+}
 
 async function updatePanelView(panelView: string) {
     await toolStore.setCurrentPanelView(panelView);
diff --git a/client/src/components/Toolshed/RepositoryDetails/Index.test.js b/client/src/components/Toolshed/RepositoryDetails/Index.test.js
index 74a9d88f8013..dbcb10ea2741 100644
--- a/client/src/components/Toolshed/RepositoryDetails/Index.test.js
+++ b/client/src/components/Toolshed/RepositoryDetails/Index.test.js
@@ -1,4 +1,6 @@
 import { shallowMount } from "@vue/test-utils";
+import axios from "axios";
+import MockAdapter from "axios-mock-adapter";
 import { getAppRoot } from "onload/loadConfig";
 import { createPinia } from "pinia";
 import { getLocalVue } from "tests/jest/helpers";
@@ -31,6 +33,8 @@ Services.mockImplementation(() => {
 
 describe("RepositoryDetails", () => {
     it("test repository details index", async () => {
+        const axiosMock = new MockAdapter(axios);
+        axiosMock.onGet("api/tools?in_panel=true&view=default").reply(200, {});
         mockFetcher.path("/api/configuration").method("get").mock({ data: {} });
         const localVue = getLocalVue();
         const pinia = createPinia();