@atlaskit/react-ufo 3.14.6 → 3.14.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/ufo-interaction-ignore
 
+## 3.14.8
+
+### Patch Changes
+
+- [#179381](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179381)
+  [`05fa3d08ecda9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05fa3d08ecda9) -
+  User vc observer per interaction
+
+## 3.14.7
+
+### Patch Changes
+
+- [#179438](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/179438)
+  [`b0d336b1f78b3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b0d336b1f78b3) -
+  AFO-4081 support ssr-placeholder for ttvc v3
+
 ## 3.14.6
 
 ### Patch Changes

package/dist/cjs/create-experimental-interaction-metrics-payload/index.js

@@ -95,17 +95,19 @@ function getExperimentalVCMetrics(_x) {
 }
 function _getExperimentalVCMetrics() {
   _getExperimentalVCMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction) {
-    var _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
+    var vcObserver, _interaction$apdex, prefix, result, VC, pageVisibilityUpToTTAI;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          if (!experimentalVC.vcObserver) {
-            _context.next = 12;
+          // Use per-interaction VC observer if available, otherwise fall back to global experimentalVC
+          vcObserver = interaction.experimentalVCObserver || experimentalVC.vcObserver;
+          if (!vcObserver) {
+            _context.next = 13;
             break;
           }
           prefix = 'ufo-experimental';
-          _context.next = 4;
-          return experimentalVC.vcObserver.getVCResult({
+          _context.next = 5;
+          return vcObserver.getVCResult({
             start: interaction.start,
             stop: interaction.end,
             tti: (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime,
@@ -115,28 +117,28 @@ function _getExperimentalVCMetrics() {
             experienceKey: interaction.ufoName,
             interactionId: interaction.id
           });
-        case 4:
+        case 5:
           result = _context.sent;
           VC = result === null || result === void 0 ? void 0 : result['metrics:vc'];
           if (!(!VC || !(result !== null && result !== void 0 && result["".concat(prefix, ":vc:clean")]))) {
-            _context.next = 8;
+            _context.next = 9;
             break;
           }
           return _context.abrupt("return", result);
-        case 8:
+        case 9:
           pageVisibilityUpToTTAI = (0, _hiddenTiming.getPageVisibilityState)(interaction.start, interaction.end);
           if (!(interaction.abortReason || pageVisibilityUpToTTAI !== 'visible')) {
-            _context.next = 11;
+            _context.next = 12;
             break;
           }
           return _context.abrupt("return", result);
-        case 11:
+        case 12:
           return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
             'metric:experimental:vc90': VC['90']
           }));
-        case 12:
-          return _context.abrupt("return", null);
         case 13:
+          return _context.abrupt("return", null);
+        case 14:
         case "end":
           return _context.stop();
       }

package/dist/cjs/create-payload/utils/get-vc-metrics.js

@@ -23,7 +23,7 @@ function getVCMetrics(_x) {
 function _getVCMetrics() {
   _getVCMetrics = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(interaction) {
     var _config$vc, _config$vc$ssrWhiteli, _interaction$apdex, _config$vc2, _config$vc3, _config$experimentalI, _result$ufoVcRev;
-    var config, interactionStatus, pageVisibilityUpToTTAI, shouldReportVCMetrics, isSSREnabled, ssr, tti, prefix, result, mostRecentVCRevision, mostRecentVCRevisionPayload;
+    var config, interactionStatus, pageVisibilityUpToTTAI, shouldReportVCMetrics, observer, isSSREnabled, ssr, tti, prefix, result, mostRecentVCRevision, mostRecentVCRevisionPayload;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
@@ -34,7 +34,7 @@ function _getVCMetrics() {
           }
           return _context.abrupt("return", {});
         case 3:
-          if (!((0, _platformFeatureFlags.fg)('platform_ufo_enable_interactions_vc') || (0, _platformFeatureFlags.fg)('platform_ufo_enable_interactivity_jsm'))) {
+          if (!(0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_press_interactions')) {
             _context.next = 8;
             break;
           }
@@ -55,14 +55,15 @@ function _getVCMetrics() {
         case 10:
           interactionStatus = (0, _getInteractionStatus.default)(interaction);
           pageVisibilityUpToTTAI = (0, _getPageVisibilityUpToTtai.default)(interaction);
-          shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible';
+          shouldReportVCMetrics = interactionStatus.originalInteractionStatus === 'SUCCEEDED' && pageVisibilityUpToTTAI === 'visible'; // Use per-interaction VC observer if available, otherwise fall back to global
+          observer = interaction.vcObserver || (0, _vc.getVCObserver)();
           if (!(!shouldReportVCMetrics && (0, _platformFeatureFlags.fg)('platform_ufo_no_vc_on_aborted'))) {
-            _context.next = 16;
+            _context.next = 17;
             break;
           }
-          (0, _vc.getVCObserver)().stop(interaction.ufoName);
+          observer.stop(interaction.ufoName);
           return _context.abrupt("return", {});
-        case 16:
+        case 17:
           isSSREnabled = interaction.type === 'page_load' && ((config === null || config === void 0 ? void 0 : config.ssr) || (config === null || config === void 0 || (_config$vc$ssrWhiteli = config.vc.ssrWhitelist) === null || _config$vc$ssrWhiteli === void 0 ? void 0 : _config$vc$ssrWhiteli.includes(interaction.ufoName)));
           ssr = interaction.type === 'page_load' && isSSREnabled ? {
             ssr: (0, _getSsrDoneTimeValue.default)(config)
@@ -70,8 +71,8 @@ function _getVCMetrics() {
           _interactionMetrics.postInteractionLog.setVCObserverSSRConfig(ssr);
           tti = (_interaction$apdex = interaction.apdex) === null || _interaction$apdex === void 0 || (_interaction$apdex = _interaction$apdex[0]) === null || _interaction$apdex === void 0 ? void 0 : _interaction$apdex.stopTime;
           prefix = 'ufo';
-          _context.next = 23;
-          return (0, _vc.getVCObserver)().getVCResult(_objectSpread({
+          _context.next = 24;
+          return observer.getVCResult(_objectSpread({
             start: interaction.start,
             stop: interaction.end,
             tti: tti,
@@ -83,10 +84,13 @@ function _getVCMetrics() {
             interactionId: interaction.id,
             includeSSRRatio: (_config$vc3 = config.vc) === null || _config$vc3 === void 0 ? void 0 : _config$vc3.includeSSRRatio
           }, ssr));
-        case 23:
+        case 24:
           result = _context.sent;
+          if ((0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_observer_per_interaction')) {
+            observer.stop(interaction.ufoName);
+          }
           if ((_config$experimentalI = config.experimentalInteractionMetrics) !== null && _config$experimentalI !== void 0 && _config$experimentalI.enabled) {
-            (0, _vc.getVCObserver)().stop(interaction.ufoName);
+            observer.stop(interaction.ufoName);
           }
           _interactionMetrics.postInteractionLog.setLastInteractionFinishVCResult(result);
           mostRecentVCRevision = (0, _config.getMostRecentVCRevision)(interaction.ufoName);
@@ -95,15 +99,15 @@ function _getVCMetrics() {
             return revision === mostRecentVCRevision;
           });
           if (!(!shouldReportVCMetrics || !(mostRecentVCRevisionPayload !== null && mostRecentVCRevisionPayload !== void 0 && mostRecentVCRevisionPayload.clean))) {
-            _context.next = 30;
+            _context.next = 32;
             break;
           }
           return _context.abrupt("return", result);
-        case 30:
+        case 32:
           return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
             'metric:vc90': mostRecentVCRevisionPayload['metric:vc90']
           }));
-        case 31:
+        case 33:
         case "end":
           return _context.stop();
       }

package/dist/cjs/interaction-metrics/index.js

@@ -569,7 +569,9 @@ function finishInteraction(id, data) {
   (0, _experienceTraceIdContext.clearActiveTrace)();
   callCleanUpCallbacks(data);
   if ((_getConfig4 = (0, _config.getConfig)()) !== null && _getConfig4 !== void 0 && (_getConfig4 = _getConfig4.vc) !== null && _getConfig4 !== void 0 && _getConfig4.stopVCAtInteractionFinish) {
-    data.vc = (0, _vc.getVCObserver)().getVCRawData();
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = data.vcObserver || (0, _vc.getVCObserver)();
+    data.vc = observer.getVCRawData();
   }
   if (!((_getConfig5 = (0, _config.getConfig)()) !== null && _getConfig5 !== void 0 && (_getConfig5 = _getConfig5.experimentalInteractionMetrics) !== null && _getConfig5 !== void 0 && _getConfig5.enabled)) {
     remove(id);
@@ -781,6 +783,7 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
   if ((_getConfig11 = (0, _config.getConfig)()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.postInteractionLog) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
     postInteractionLog.reset();
   }
+  var vcObserver;
   var previousTime = startTime;
   var timeoutTime = (0, _platformFeatureFlags.fg)('platform_ufo_enable_timeout_config') ? (0, _config.getInteractionTimeout)(ufoName) : CLEANUP_TIMEOUT;
   var timerID = setTimeout(function () {
@@ -803,6 +806,21 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
     this.timerID = newTimerID;
   }
   var addFeatureFlagsToInteraction = (0, _coinflip.default)((0, _config.getCapabilityRate)('feature_flag_access'));
+  var config = (0, _config.getConfig)();
+  if (config && config.vc) {
+    var vcOptions = {
+      heatmapSize: config.vc.heatmapSize,
+      oldDomUpdates: config.vc.oldDomUpdates,
+      devToolsEnabled: config.vc.devToolsEnabled,
+      selectorConfig: config.vc.selectorConfig,
+      ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
+      disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
+    };
+    vcObserver = (0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_observer_per_interaction') ? (0, _vc.newVCObserver)(vcOptions) : undefined;
+  }
+
+  // Create per-interaction VC observer when feature flag is enabled
+
   var metrics = {
     id: interactionId,
     start: startTime,
@@ -843,7 +861,8 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
     redirects: [],
     timerID: timerID,
     changeTimeout: changeTimeout,
-    trace: trace
+    trace: trace,
+    vcObserver: vcObserver
   };
   if (addFeatureFlagsToInteraction) {
     _featureFlagsAccessed.currentFeatureFlagsAccessed.clear();
@@ -862,13 +881,21 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
   metrics.cleanupCallbacks.push(function () {
     clearTimeout(metrics.timerID);
   });
+  // Add cleanup for per-interaction VC observer
+  if (vcObserver) {
+    metrics.cleanupCallbacks.push(function () {
+      vcObserver.stop(ufoName);
+    });
+  }
   var awaitBM3TTIList = (0, _config.getAwaitBM3TTIList)();
   if (awaitBM3TTIList.includes(ufoName)) {
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
-  if (type === 'transition') {
+  if (type === 'transition' || type === 'page_load') {
     var _getConfig12;
-    (0, _vc.getVCObserver)().start({
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var observer = vcObserver || (0, _vc.getVCObserver)();
+    observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
@@ -881,20 +908,13 @@ function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelS
       });
     }
   }
-  if (type === 'press' && ((0, _platformFeatureFlags.fg)('platform_ufo_enable_interactions_vc') || (0, _platformFeatureFlags.fg)('platform_ufo_enable_interactivity_jsm'))) {
-    var _getConfig13;
-    (0, _vc.getVCObserver)().start({
+  if (type === 'press' && (0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_press_interactions')) {
+    // Use per-interaction VC observer if available, otherwise fall back to global
+    var _observer = vcObserver || (0, _vc.getVCObserver)();
+    _observer.start({
       startTime: startTime,
       experienceKey: ufoName
     });
-    postInteractionLog.startVCObserver({
-      startTime: startTime
-    });
-    if ((_getConfig13 = (0, _config.getConfig)()) !== null && _getConfig13 !== void 0 && (_getConfig13 = _getConfig13.experimentalInteractionMetrics) !== null && _getConfig13 !== void 0 && _getConfig13.enabled) {
-      _createExperimentalInteractionMetricsPayload.experimentalVC.start({
-        startTime: startTime
-      });
-    }
   }
 }
 function addBrowserMetricEvent(event) {

package/dist/cjs/interaction-metrics-init/index.js

@@ -101,9 +101,11 @@ function init(analyticsWebClientAsync, config) {
       ssrEnablePageLayoutPlaceholder: config.vc.ssrEnablePageLayoutPlaceholder,
       disableSizeAndPositionCheck: config.vc.disableSizeAndPositionCheck
     };
-    (0, _vc.getVCObserver)(vcOptions).start({
-      startTime: 0
-    });
+    if (!(0, _platformFeatureFlags.fg)('platform_ufo_enable_vc_observer_per_interaction')) {
+      (0, _vc.getVCObserver)(vcOptions).start({
+        startTime: 0
+      });
+    }
     _interactionMetrics.postInteractionLog.initializeVCObserver(vcOptions);
     _interactionMetrics.postInteractionLog.startVCObserver({
       startTime: 0

package/dist/cjs/vc/index.js

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.VCObserverWrapper = void 0;
 exports.getVCObserver = getVCObserver;
 exports.isEnvironmentSupported = isEnvironmentSupported;
+exports.newVCObserver = newVCObserver;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _config = require("../config");
@@ -18,22 +19,45 @@ var _noOpVcObserver = require("./no-op-vc-observer");
 var _vcObserver = require("./vc-observer");
 var _vcObserverNew = _interopRequireDefault(require("./vc-observer-new"));
 var _rllPlaceholders = require("./vc-observer/observers/rll-placeholders");
+var _ssrPlaceholders = require("./vc-observer/observers/ssr-placeholders");
 var _process;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
   function VCObserverWrapper() {
+    var _opts$ssrEnablePageLa, _opts$disableSizeAndP;
     var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     (0, _classCallCheck2.default)(this, VCObserverWrapper);
     this.newVCObserver = null;
     this.oldVCObserver = null;
+
+    // Initialize SSR placeholder handler once
+    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
+      enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa !== void 0 ? _opts$ssrEnablePageLa : false,
+      disableSizeAndPositionCheck: (_opts$disableSizeAndP = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP !== void 0 ? _opts$disableSizeAndP : {
+        v: false,
+        h: false
+      }
+    });
     if ((0, _config.isVCRevisionEnabled)('fy25.03')) {
+      var _opts$ssrEnablePageLa2, _opts$disableSizeAndP2;
       this.newVCObserver = new _vcObserverNew.default({
-        selectorConfig: opts.selectorConfig
+        selectorConfig: opts.selectorConfig,
+        isPostInteraction: opts.isPostInteraction,
+        SSRConfig: {
+          enablePageLayoutPlaceholder: (_opts$ssrEnablePageLa2 = opts.ssrEnablePageLayoutPlaceholder) !== null && _opts$ssrEnablePageLa2 !== void 0 ? _opts$ssrEnablePageLa2 : false,
+          disableSizeAndPositionCheck: (_opts$disableSizeAndP2 = opts.disableSizeAndPositionCheck) !== null && _opts$disableSizeAndP2 !== void 0 ? _opts$disableSizeAndP2 : {
+            v: false,
+            h: false
+          }
+        },
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
       });
     }
     if ((0, _config.isVCRevisionEnabled)('fy25.01') || (0, _config.isVCRevisionEnabled)('fy25.02')) {
-      this.oldVCObserver = new _vcObserver.VCObserver(opts);
+      this.oldVCObserver = new _vcObserver.VCObserver(_objectSpread(_objectSpread({}, opts), {}, {
+        ssrPlaceholderHandler: this.ssrPlaceholderHandler
+      }));
     }
   }
 
@@ -92,6 +116,8 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
         (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 || _this$newVCObserver2.stop();
       }
       _rllPlaceholders.RLLPlaceholderHandlers.getInstance().reset();
+      // Clear shared SSR placeholder handler
+      this.ssrPlaceholderHandler.clear();
     }
   }, {
     key: "getVCRawData",
@@ -165,20 +191,28 @@ var VCObserverWrapper = exports.VCObserverWrapper = /*#__PURE__*/function () {
   }, {
     key: "setSSRElement",
     value: function setSSRElement(element) {
-      var _this$oldVCObserver5;
+      var _this$oldVCObserver5, _this$newVCObserver4;
       (_this$oldVCObserver5 = this.oldVCObserver) === null || _this$oldVCObserver5 === void 0 || _this$oldVCObserver5.setSSRElement(element);
+      (_this$newVCObserver4 = this.newVCObserver) === null || _this$newVCObserver4 === void 0 || _this$newVCObserver4.setReactRootElement(element);
     }
   }, {
     key: "setReactRootRenderStart",
     value: function setReactRootRenderStart(startTime) {
-      var _this$oldVCObserver6;
+      var _this$oldVCObserver6, _this$newVCObserver5;
       (_this$oldVCObserver6 = this.oldVCObserver) === null || _this$oldVCObserver6 === void 0 || _this$oldVCObserver6.setReactRootRenderStart(startTime || performance.now());
+      (_this$newVCObserver5 = this.newVCObserver) === null || _this$newVCObserver5 === void 0 || _this$newVCObserver5.setReactRootRenderStart(startTime || performance.now());
     }
   }, {
     key: "setReactRootRenderStop",
     value: function setReactRootRenderStop(stopTime) {
-      var _this$oldVCObserver7;
+      var _this$oldVCObserver7, _this$newVCObserver6;
       (_this$oldVCObserver7 = this.oldVCObserver) === null || _this$oldVCObserver7 === void 0 || _this$oldVCObserver7.setReactRootRenderStop(stopTime || performance.now());
+      (_this$newVCObserver6 = this.newVCObserver) === null || _this$newVCObserver6 === void 0 || _this$newVCObserver6.setReactRootRenderStop(stopTime || performance.now());
+    }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      this.ssrPlaceholderHandler.collectExistingPlaceholders();
     }
   }]);
 }(); // Some products set this variable to indicate it is running in SSR
@@ -208,4 +242,10 @@ function getVCObserver() {
     globalThis.__vcObserver = shouldMockVCObserver ? new _noOpVcObserver.VCObserverNOOP() : new VCObserverWrapper(opts);
   }
   return globalThis.__vcObserver;
+}
+function newVCObserver() {
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var shouldMockVCObserver = !isEnvironmentSupported();
+  var observer = shouldMockVCObserver ? new _noOpVcObserver.VCObserverNOOP() : new VCObserverWrapper(opts);
+  return observer;
 }

package/dist/cjs/vc/vc-observer/index.js

@@ -455,7 +455,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
     this.devToolsEnabled = options.devToolsEnabled || false;
     this.oldDomUpdatesEnabled = options.oldDomUpdates || false;
     var ssrEnablePageLayoutPlaceholder = options.ssrEnablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck;
+      disableSizeAndPositionCheck = options.disableSizeAndPositionCheck,
+      ssrPlaceholderHandler = options.ssrPlaceholderHandler;
     this.observers = new _observers.Observers({
       selectorConfig: options.selectorConfig || {
         id: false,
@@ -467,7 +468,8 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       SSRConfig: {
         enablePageLayoutPlaceholder: ssrEnablePageLayoutPlaceholder || false,
         disableSizeAndPositionCheck: disableSizeAndPositionCheck
-      }
+      },
+      ssrPlaceholderHandler: ssrPlaceholderHandler
     });
     this.heatmap = !(0, _config.isVCRevisionEnabled)('fy25.01') ? [] : this.getCleanHeatmap();
     this.heatmapNext = this.getCleanHeatmap();
@@ -527,6 +529,12 @@ var VCObserver = exports.VCObserver = /*#__PURE__*/function () {
       var stopTime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : performance.now();
       this.observers.setReactRootRenderStop(stopTime);
     }
+  }, {
+    key: "collectSSRPlaceholders",
+    value: function collectSSRPlaceholders() {
+      // This is handled by the shared SSRPlaceholderHandlers in VCObserverWrapper
+      // Individual observers don't need to implement this
+    }
   }, {
     key: "setAbortReason",
     value: function setAbortReason(abort, timestamp) {

package/dist/cjs/vc/vc-observer/observers/index.js

@@ -32,9 +32,7 @@ function isElementVisible(target) {
 }
 var Observers = exports.Observers = /*#__PURE__*/function () {
   function Observers(opts) {
-    var _this = this,
-      _opts$SSRConfig,
-      _opts$SSRConfig2;
+    var _this = this;
     (0, _classCallCheck2.default)(this, Observers);
     (0, _defineProperty2.default)(this, "observedMutations", new WeakMap());
     (0, _defineProperty2.default)(this, "elementsInView", new Set());
@@ -74,10 +72,17 @@ var Observers = exports.Observers = /*#__PURE__*/function () {
     this.selectorConfig = _objectSpread(_objectSpread({}, this.selectorConfig), opts.selectorConfig);
     this.intersectionObserver = this.getIntersectionObserver();
     this.mutationObserver = this.getMutationObserver();
-    this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
-      enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
-      disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
-    });
+
+    // Use shared SSR placeholder handler if provided, otherwise create new one
+    if (opts.ssrPlaceholderHandler) {
+      this.ssrPlaceholderHandler = opts.ssrPlaceholderHandler;
+    } else {
+      var _opts$SSRConfig, _opts$SSRConfig2;
+      this.ssrPlaceholderHandler = new _ssrPlaceholders.SSRPlaceholderHandlers({
+        enablePageLayoutPlaceholder: (_opts$SSRConfig = opts.SSRConfig) === null || _opts$SSRConfig === void 0 ? void 0 : _opts$SSRConfig.enablePageLayoutPlaceholder,
+        disableSizeAndPositionCheck: (_opts$SSRConfig2 = opts.SSRConfig) === null || _opts$SSRConfig2 === void 0 ? void 0 : _opts$SSRConfig2.disableSizeAndPositionCheck
+      });
+    }
   }
   return (0, _createClass2.default)(Observers, [{
     key: "isBrowserSupported",

package/dist/cjs/vc/vc-observer/observers/ssr-placeholders/index.js

@@ -111,32 +111,8 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
     this.disableSizeAndPositionCheck = disableSizeAndPositionCheck;
     if (window.document) {
       try {
-        var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
-        var existingElements = document.querySelectorAll(selector);
-        existingElements.forEach(function (el) {
-          var placeholderId = el instanceof HTMLElement && _this.getPlaceholderId(el);
-          if (placeholderId) {
-            var _window$__SSR_PLACEHO, _this$intersectionObs2;
-            var width = -1;
-            var height = -1;
-            var x = -1;
-            var y = -1;
-            var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
-            if (boundingClientRect) {
-              width = boundingClientRect.width;
-              height = boundingClientRect.height;
-              x = boundingClientRect.x;
-              y = boundingClientRect.y;
-            }
-            _this.staticPlaceholders.set(placeholderId, {
-              width: width,
-              height: height,
-              x: x,
-              y: y
-            });
-            (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.observe(el);
-          }
-        });
+        // Collect initial placeholders using SSR dimensions
+        this.collectPlaceholdersInternal();
       } catch (e) {} finally {
         delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
       }
@@ -150,6 +126,66 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
       this.getSizeCallbacks = new Map();
       this.reactValidateCallbacks = new Map();
     }
+  }, {
+    key: "collectPlaceholdersInternal",
+    value: function collectPlaceholdersInternal() {
+      var _this2 = this;
+      var selector = this.enablePageLayoutPlaceholder ? '[data-ssr-placeholder],[data-testid="page-layout.root"]' : '[data-ssr-placeholder]';
+      var existingElements = document.querySelectorAll(selector);
+      existingElements.forEach(function (el) {
+        var placeholderId = el instanceof HTMLElement && _this2.getPlaceholderId(el);
+        if (placeholderId && !_this2.staticPlaceholders.has(placeholderId)) {
+          var _window$__SSR_PLACEHO, _this2$intersectionOb;
+          var width = -1;
+          var height = -1;
+          var x = -1;
+          var y = -1;
+
+          // Use SSR dimensions from window global if available
+          var boundingClientRect = (_window$__SSR_PLACEHO = window.__SSR_PLACEHOLDERS_DIMENSIONS__) === null || _window$__SSR_PLACEHO === void 0 ? void 0 : _window$__SSR_PLACEHO[placeholderId];
+          if (boundingClientRect) {
+            width = boundingClientRect.width;
+            height = boundingClientRect.height;
+            x = boundingClientRect.x;
+            y = boundingClientRect.y;
+          } else {
+            // Fallback to current bounding rect if SSR dimensions not available
+            var rect = el.getBoundingClientRect();
+            width = rect.width;
+            height = rect.height;
+            x = rect.x;
+            y = rect.y;
+          }
+          _this2.staticPlaceholders.set(placeholderId, {
+            width: width,
+            height: height,
+            x: x,
+            y: y
+          });
+          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
+        }
+      });
+    }
+
+    /**
+     * Added this method to be utilised for testing purposes.
+     * In production it collection placeholder should only happens on constructor
+     */
+  }, {
+    key: "collectExistingPlaceholders",
+    value: function collectExistingPlaceholders() {
+      if (!window.document) {
+        return;
+      }
+      try {
+        // Collect placeholders using SSR dimensions or fallback to live dimensions
+        this.collectPlaceholdersInternal();
+      } catch (e) {
+        // Silently fail if there are any issues
+      } finally {
+        delete window.__SSR_PLACEHOLDERS_DIMENSIONS__;
+      }
+    }
   }, {
     key: "isPlaceholder",
     value: function isPlaceholder(element) {
@@ -186,44 +222,44 @@ var SSRPlaceholderHandlers = exports.SSRPlaceholderHandlers = /*#__PURE__*/funct
   }, {
     key: "checkIfExistedAndSizeMatching",
     value: function checkIfExistedAndSizeMatching(el) {
-      var _this2 = this;
+      var _this3 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderId(el);
       return new Promise(function (resolve) {
-        if (!_this2.staticPlaceholders.has(id)) {
+        if (!_this3.staticPlaceholders.has(id)) {
           resolve(false);
           return;
         } else {
-          var _this2$intersectionOb;
-          _this2.callbacks.set(id, resolve);
-          (_this2$intersectionOb = _this2.intersectionObserver) === null || _this2$intersectionOb === void 0 || _this2$intersectionOb.observe(el);
+          var _this3$intersectionOb;
+          _this3.callbacks.set(id, resolve);
+          (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
         }
       });
     }
   }, {
     key: "getSize",
     value: function getSize(el) {
-      var _this3 = this;
+      var _this4 = this;
       return new Promise(function (resolve) {
-        var _this3$intersectionOb;
-        _this3.getSizeCallbacks.set(_this3.getPlaceholderId(el), resolve);
-        (_this3$intersectionOb = _this3.intersectionObserver) === null || _this3$intersectionOb === void 0 || _this3$intersectionOb.observe(el);
+        var _this4$intersectionOb;
+        _this4.getSizeCallbacks.set(_this4.getPlaceholderId(el), resolve);
+        (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
       });
     }
   }, {
     key: "validateReactComponentMatchToPlaceholder",
     value: function validateReactComponentMatchToPlaceholder(el) {
-      var _this4 = this;
+      var _this5 = this;
       el = this.findNearestPlaceholderContainerIfIgnored(el);
       var id = this.getPlaceholderReplacementId(el);
       return new Promise(function (resolve) {
-        if (!_this4.staticPlaceholders.has(id)) {
+        if (!_this5.staticPlaceholders.has(id)) {
           resolve(false);
           return;
         } else {
-          var _this4$intersectionOb;
-          _this4.reactValidateCallbacks.set(id, resolve);
-          (_this4$intersectionOb = _this4.intersectionObserver) === null || _this4$intersectionOb === void 0 || _this4$intersectionOb.observe(el);
+          var _this5$intersectionOb;
+          _this5.reactValidateCallbacks.set(id, resolve);
+          (_this5$intersectionOb = _this5.intersectionObserver) === null || _this5$intersectionOb === void 0 || _this5$intersectionOb.observe(el);
         }
       });
     }