diff --git a/web/src/components/dashboards/VariablesValueSelector.vue b/web/src/components/dashboards/VariablesValueSelector.vue
index 0aa063e809..7ce6af1b61 100644
--- a/web/src/components/dashboards/VariablesValueSelector.vue
+++ b/web/src/components/dashboards/VariablesValueSelector.vue
@@ -307,7 +307,7 @@ export default defineComponent({
       initializeVariablesData();
 
       // load all variables
-      loadAllVariablesData();
+      await loadAllVariablesData(true);
     };
 
     /**
@@ -553,7 +553,7 @@ export default defineComponent({
           await finalizeVariableLoading(variableObject, success);
           resolve(success);
         } catch (error) {
-          finalizeVariableLoading(variableObject, false);
+          await finalizeVariableLoading(variableObject, false);
           resolve(false);
         }
       });
@@ -775,6 +775,7 @@ export default defineComponent({
         emitVariablesData();
       } else {
         variableObject.isLoading = false;
+        variableObject.isVariableLoadingPending = false;
       }
     };
 
@@ -841,7 +842,13 @@ export default defineComponent({
             loadSingleVariableDataByName(variable),
           ),
         );
-      } catch (error) {}
+      } catch (error) {
+        await Promise.all(
+          independentVariables.map((variable: any) =>
+            finalizeVariableLoading(variable, false),
+          ),
+        );
+      }
 
       const loadDependentVariables = async () => {
         for (const variable of dependentVariables) {
@@ -978,7 +985,9 @@ export default defineComponent({
 
       // Load variables in dependency order
       for (const varName of affectedVariables) {
-        const variable = variablesData.values.find((v: any) => v.name === varName);
+        const variable = variablesData.values.find(
+          (v: any) => v.name === varName,
+        );
         if (variable) {
           await loadSingleVariableDataByName(variable);
         }
diff --git a/web/src/views/Dashboards/RenderDashboardCharts.vue b/web/src/views/Dashboards/RenderDashboardCharts.vue
index 8f40e5d3e7..62dd9ee9ab 100644
--- a/web/src/views/Dashboards/RenderDashboardCharts.vue
+++ b/web/src/views/Dashboards/RenderDashboardCharts.vue
@@ -279,8 +279,8 @@ export default defineComponent({
       showErrorNotification,
       showConfictErrorNotificationWithRefreshBtn,
     } = useNotifications();
-    const refreshDashboard = () => {
-      emit("refresh");
+    const refreshDashboard = (onlyIfRequired = false) => {
+      emit("refresh", onlyIfRequired);
     };
 
     const onMovePanel = (panelId: any, newTabId: any) => {
@@ -553,19 +553,28 @@ export default defineComponent({
       }
     };
 
-    // update initial variable values using the variable value selector ref
+    /**
+     * Updates the initial variable values using the variable value selector ref
+     * @param args - Any arguments to be passed to `changeInitialVariableValues` method
+     */
     const updateInitialVariableValues = async (...args: any) => {
       // if view panel is open then close it
       showViewPanel.value = false;
 
       // first, refresh the dashboard
-      refreshDashboard();
+      refreshDashboard(true);
 
       // NOTE: after variables in variables feature, it works without changing the initial variable values
       // then, update the initial variable values
       await variablesValueSelectorRef.value.changeInitialVariableValues(
         ...args,
       );
+
+      // This is necessary to ensure that panels refresh automatically based on the drilldown
+      // without requiring the user to click on refresh to load the panel/whole dashboard
+      currentVariablesDataRef.value = {
+        __global: JSON.parse(JSON.stringify(variablesData.value)),
+      };
     };
 
     const refreshPanelRequest = (panelId) => {
diff --git a/web/src/views/Dashboards/ViewDashboard.vue b/web/src/views/Dashboards/ViewDashboard.vue
index ca690ba436..d866be883c 100644
--- a/web/src/views/Dashboards/ViewDashboard.vue
+++ b/web/src/views/Dashboards/ViewDashboard.vue
@@ -245,6 +245,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       </div>
 
       <RenderDashboardCharts
+        :key="currentDashboardData.data?.dashboardId"
         v-if="selectedDate"
         ref="renderDashboardChartsRef"
         @variablesData="variablesDataUpdated"
@@ -584,7 +585,18 @@ export default defineComponent({
                   `;
     };
 
-    const loadDashboard = async () => {
+    const loadDashboard = async (onlyIfRequired = false) => {
+      // check if drilldown or soft-refresh request
+      if (onlyIfRequired) {
+        // if current dashboard id and tab is same,  skip loading
+        if (
+          currentDashboardData?.data?.dashboardId === route.query.dashboard &&
+          // check for tab
+          selectedTabId.value === route.query.tab
+        ) {
+          return;
+        }
+      }
       currentDashboardData.data = await getDashboard(
         store,
         route.query.dashboard,