fix: load resources when switch pages (#4994)

Fixes #4992

Author: TrySound

apps/builder/app/builder/features/settings-panel/variable-popover.tsx

@@ -55,7 +55,7 @@ import {
   $resources,
   $areResourcesLoading,
   invalidateResource,
-  getComputedResource,
+  getComputedResourceRequest,
   $userPlanFeatures,
   $instances,
   $props,
@@ -776,7 +776,7 @@ export const VariablePopoverTrigger = ({
                           prefix={<CopyIcon />}
                           color="ghost"
                           onClick={() => {
-                            const resourceRequest = getComputedResource(
+                            const resourceRequest = getComputedResourceRequest(
                               variable.resourceId
                             );
                             if (resourceRequest) {

apps/builder/app/shared/nano-states/props.ts

@@ -15,6 +15,7 @@ import {
   portalComponent,
   ROOT_INSTANCE_ID,
   SYSTEM_VARIABLE_ID,
+  findTreeInstanceIds,
 } from "@webstudio-is/sdk";
 import { normalizeProps, textContentAttribute } from "@webstudio-is/react-sdk";
 import { mapGroupBy } from "~/shared/shim";
@@ -168,23 +169,19 @@ const $unscopedVariableValues = computed(
  * circular updates
  */
 const $loaderVariableValues = computed(
-  [$dataSources, $dataSourceVariables, $selectedPage, $currentSystem],
-  (dataSources, dataSourceVariables, selectedPage, system) => {
+  [$dataSources, $selectedPage, $currentSystem],
+  (dataSources, selectedPage, system) => {
     const values = new Map<string, unknown>();
     values.set(SYSTEM_VARIABLE_ID, system);
     for (const [dataSourceId, dataSource] of dataSources) {
       if (dataSource.type === "variable") {
-        values.set(
-          dataSourceId,
-          dataSourceVariables.get(dataSourceId) ?? dataSource.value.value
-        );
+        values.set(dataSourceId, dataSource.value.value);
       }
-      if (dataSource.type === "parameter") {
-        let value = dataSourceVariables.get(dataSourceId);
-        if (dataSource.id === selectedPage?.systemDataSourceId) {
-          value = system;
-        }
-        values.set(dataSourceId, value);
+      if (
+        dataSource.type === "parameter" ||
+        dataSource.id === selectedPage?.systemDataSourceId
+      ) {
+        values.set(dataSourceId, system);
       }
     }
     return values;
@@ -549,7 +546,7 @@ export const $variableValuesByInstanceSelector = computed(
   }
 );
 
-const computeResource = (
+const computeResourceRequest = (
   resource: Resource,
   values: Map<DataSource["id"], unknown>
 ): ResourceRequest => {
@@ -569,21 +566,31 @@ const computeResource = (
   return request;
 };
 
-const $computedResources = computed(
-  [$dataSources, $resources, $loaderVariableValues],
-  (dataSources, resources, values) => {
-    const computedResources: ResourceRequest[] = [];
-    // load only resources bound to variables
+const $computedResourceRequests = computed(
+  [$selectedPage, $instances, $dataSources, $resources, $loaderVariableValues],
+  (page, instances, dataSources, resources, values) => {
+    const computedResourceRequests: ResourceRequest[] = [];
+    if (page === undefined) {
+      return computedResourceRequests;
+    }
+    const instanceIds = findTreeInstanceIds(instances, page.rootInstanceId);
+    instanceIds.add(ROOT_INSTANCE_ID);
+    // load only resources bound to variables on current page
     // action resources should not be loaded automatically
     for (const dataSource of dataSources.values()) {
-      if (dataSource.type === "resource") {
+      if (
+        instanceIds.has(dataSource.scopeInstanceId ?? "") &&
+        dataSource.type === "resource"
+      ) {
         const resource = resources.get(dataSource.resourceId);
         if (resource) {
-          computedResources.push(computeResource(resource, values));
+          computedResourceRequests.push(
+            computeResourceRequest(resource, values)
+          );
         }
       }
     }
-    return computedResources;
+    return computedResourceRequests;
   }
 );
 
@@ -610,19 +617,19 @@ const cacheByKeys = new Map<string, unknown>();
 
 const $invalidator = atom(0);
 
-export const getComputedResource = (resourceId: Resource["id"]) => {
+export const getComputedResourceRequest = (resourceId: Resource["id"]) => {
   const resources = $resources.get();
   const resource = resources.get(resourceId);
   if (resource === undefined) {
     return;
   }
   const values = $loaderVariableValues.get();
-  return computeResource(resource, values);
+  return computeResourceRequest(resource, values);
 };
 
 // bump index of resource to invaldate cache entry
 export const invalidateResource = (resourceId: Resource["id"]) => {
-  const request = getComputedResource(resourceId);
+  const request = getComputedResourceRequest(resourceId);
   if (request === undefined) {
     return;
   }
@@ -641,10 +648,10 @@ export const subscribeResources = () => {
   let frameId: undefined | number;
   // subscribe changing resources or global invalidation
   return computed(
-    [$computedResources, $invalidator],
-    (computedResources, invalidator) =>
-      [computedResources, invalidator] as const
-  ).subscribe(([computedResources]) => {
+    [$computedResourceRequests, $invalidator],
+    (computedResourceRequests, invalidator) =>
+      [computedResourceRequests, invalidator] as const
+  ).subscribe(([computedResourceRequests]) => {
     if (frameId) {
       cancelAnimationFrame(frameId);
     }
@@ -653,7 +660,7 @@ export const subscribeResources = () => {
     frameId = requestAnimationFrame(async () => {
       const matched = new Map<Resource["id"], ResourceRequest>();
       const missing = new Map<Resource["id"], ResourceRequest>();
-      for (const request of computedResources) {
+      for (const request of computedResourceRequests) {
         const cacheKey = JSON.stringify(request);
         if (cacheByKeys.has(cacheKey)) {
           matched.set(request.id, request);
@@ -668,14 +675,12 @@ export const subscribeResources = () => {
         cacheByKeys.set(cacheKey, undefined);
       }
 
-      const missingValues = Array.from(missing.values());
-      if (missingValues.length === 0) {
-        return;
+      let result = new Map<string, unknown>();
+      if (missing.size > 0) {
+        result = await loadResources(Array.from(missing.values()));
       }
-
-      const result = await loadResources(missingValues);
       const newResourceValues = new Map();
-      for (const request of computedResources) {
+      for (const request of computedResourceRequests) {
         const cacheKey = JSON.stringify(request);
         // read from cache or store in cache
         const response = result.get(request.id) ?? cacheByKeys.get(cacheKey);