@atlaskit/react-ufo 3.13.18 → 3.13.19

package/dist/cjs/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -14,9 +16,12 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _percentileCalc = require("./percentile-calc");
 var _getViewportHeight = _interopRequireDefault(require("./utils/get-viewport-height"));
 var _getViewportWidth = _interopRequireDefault(require("./utils/get-viewport-width"));
+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; }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// Create comprehensive debug details including ignored entries
 var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
   function AbstractVCCalculatorBase(revisionNo) {
     (0, _classCallCheck2.default)(this, AbstractVCCalculatorBase);
@@ -79,9 +84,9 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
   }, {
     key: "calculateWithDebugInfo",
     value: function () {
-      var _calculateWithDebugInfo = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
-        var _window, _window3;
-        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator3, _step3, _entry2, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, v3RevisionDebugDetails, _window2, _window2$__ufo_devtoo, _window4, _window4$__on_ufo_vc_;
+      var _calculateWithDebugInfo = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, allEntries) {
+        var _window, _window2, _window3, _window5;
+        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator3, _step3, _entry2, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator4, _step4, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator5, _step5, _entry3, _ignoredEntriesByTime, viewportData, timestamp, additionalVcLogs, _iterator6, _step6, _step6$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window4, _window4$__ufo_devtoo, _window6, _window6$__on_ufo_vc_;
         return _regenerator.default.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -171,38 +176,138 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
                   previousResult = vcDetails["".concat(percentile)];
                 }
               }
-              v3RevisionDebugDetails = {
-                revision: this.revisionNo,
-                isClean: isVCClean,
-                abortReason: dirtyReason,
-                vcLogs: vcLogs,
-                interactionId: interactionId
-              }; // Handle devtool callback
-              if (!isPostInteraction && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.__ufo_devtool_onVCRevisionReady__) === 'function') {
+              enhancedVcLogs = vcLogs ? vcLogs.map(function (log) {
+                return _objectSpread(_objectSpread({}, log), {}, {
+                  viewportPercentage: log.viewportPercentage
+                });
+              }) : []; // Only calculate enhanced debug details if devtool callbacks exist
+              shouldCalculateDebugDetails = !isPostInteraction && (typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.__ufo_devtool_onVCRevisionReady__) === 'function' || typeof ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.__on_ufo_vc_debug_data_ready) === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data'));
+              if (shouldCalculateDebugDetails && allEntries && vcLogs) {
+                // Pre-sort vcLogs by time for efficient lookups
+                sortedVcLogs = (0, _toConsumableArray2.default)(vcLogs).sort(function (a, b) {
+                  return a.time - b.time;
+                }); // Pre-calculate max viewport percentage up to each time for efficient lookups
+                maxViewportPercentageAtTime = new Map();
+                maxSoFar = 0;
+                _iterator4 = _createForOfIteratorHelper(sortedVcLogs);
+                try {
+                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                    log = _step4.value;
+                    if (log.viewportPercentage !== null) {
+                      maxSoFar = Math.max(maxSoFar, log.viewportPercentage);
+                      maxViewportPercentageAtTime.set(log.time, maxSoFar);
+                    }
+                  }
+
+                  // Helper function to find the biggest previous viewport percentage
+                } catch (err) {
+                  _iterator4.e(err);
+                } finally {
+                  _iterator4.f();
+                }
+                getBiggestPreviousViewportPercentage = function getBiggestPreviousViewportPercentage(targetTime) {
+                  // Binary search for the largest time <= targetTime
+                  var left = 0;
+                  var right = sortedVcLogs.length - 1;
+                  var result = -1;
+                  while (left <= right) {
+                    var mid = Math.floor((left + right) / 2);
+                    if (sortedVcLogs[mid].time <= targetTime) {
+                      result = mid;
+                      left = mid + 1;
+                    } else {
+                      right = mid - 1;
+                    }
+                  }
+                  return result >= 0 ? maxViewportPercentageAtTime.get(sortedVcLogs[result].time) || null : null;
+                }; // Group ignored entries by timestamp
+                ignoredEntriesByTime = new Map();
+                _iterator5 = _createForOfIteratorHelper(allEntries);
+                try {
+                  for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                    _entry3 = _step5.value;
+                    if ('rect' in _entry3.data && !this.isEntryIncluded(_entry3)) {
+                      viewportData = _entry3.data;
+                      timestamp = Math.round(_entry3.time);
+                      if (!ignoredEntriesByTime.has(timestamp)) {
+                        ignoredEntriesByTime.set(timestamp, []);
+                      }
+                      (_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread({}, viewportData), {}, {
+                        ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
+                      }));
+                    }
+                  }
+
+                  // Add ignored entries to vcLogs
+                } catch (err) {
+                  _iterator5.e(err);
+                } finally {
+                  _iterator5.f();
+                }
+                additionalVcLogs = [];
+                _iterator6 = _createForOfIteratorHelper(ignoredEntriesByTime);
+                try {
+                  for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                    _step6$value = (0, _slicedToArray2.default)(_step6.value, 2), _timestamp = _step6$value[0], ignoredEntries = _step6$value[1];
+                    if (ignoredEntries.length > 0) {
+                      _viewportPercentage = getBiggestPreviousViewportPercentage(_timestamp);
+                      additionalVcLogs.push({
+                        time: _timestamp,
+                        viewportPercentage: _viewportPercentage,
+                        entries: ignoredEntries
+                      });
+                    }
+                  }
+
+                  // Combine and sort all vcLogs
+                } catch (err) {
+                  _iterator6.e(err);
+                } finally {
+                  _iterator6.f();
+                }
+                enhancedVcLogs = [].concat((0, _toConsumableArray2.default)(enhancedVcLogs), additionalVcLogs).sort(function (a, b) {
+                  return a.time - b.time;
+                });
+              }
+
+              // Only create debug details if callbacks exist
+              v3RevisionDebugDetails = null;
+              if (shouldCalculateDebugDetails) {
+                v3RevisionDebugDetails = {
+                  revision: this.revisionNo,
+                  isClean: isVCClean,
+                  abortReason: dirtyReason,
+                  vcLogs: enhancedVcLogs,
+                  interactionId: interactionId
+                };
+              }
+
+              // Handle devtool callback
+              if (v3RevisionDebugDetails && typeof ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.__ufo_devtool_onVCRevisionReady__) === 'function') {
                 try {
-                  (_window2 = window) === null || _window2 === void 0 || (_window2$__ufo_devtoo = _window2.__ufo_devtool_onVCRevisionReady__) === null || _window2$__ufo_devtoo === void 0 || _window2$__ufo_devtoo.call(_window2, v3RevisionDebugDetails);
+                  (_window4 = window) === null || _window4 === void 0 || (_window4$__ufo_devtoo = _window4.__ufo_devtool_onVCRevisionReady__) === null || _window4$__ufo_devtoo === void 0 || _window4$__ufo_devtoo.call(_window4, v3RevisionDebugDetails);
                 } catch (e) {
                   // if any error communicating with devtool, we don't want to break the app
                   // eslint-disable-next-line no-console
                   console.error('Error in onVCRevisionReady', e);
                 }
               }
-              if (!isPostInteraction && typeof ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.__on_ufo_vc_debug_data_ready) === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data')) {
+              if (v3RevisionDebugDetails && typeof ((_window5 = window) === null || _window5 === void 0 ? void 0 : _window5.__on_ufo_vc_debug_data_ready) === 'function' && (0, _platformFeatureFlags.fg)('platform_ufo_emit_vc_debug_data')) {
                 try {
-                  (_window4 = window) === null || _window4 === void 0 || (_window4$__on_ufo_vc_ = _window4.__on_ufo_vc_debug_data_ready) === null || _window4$__on_ufo_vc_ === void 0 || _window4$__on_ufo_vc_.call(_window4, v3RevisionDebugDetails);
+                  (_window6 = window) === null || _window6 === void 0 || (_window6$__on_ufo_vc_ = _window6.__on_ufo_vc_debug_data_ready) === null || _window6$__on_ufo_vc_ === void 0 || _window6$__on_ufo_vc_.call(_window6, v3RevisionDebugDetails);
                 } catch (e) {
                   // eslint-disable-next-line no-console
                   console.error('Error in onVCRevisionReady', e);
                 }
               }
               return _context.abrupt("return", vcDetails);
-            case 34:
+            case 38:
             case "end":
               return _context.stop();
           }
         }, _callee, this, [[10, 22, 25, 28]]);
       }));
-      function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7) {
+      function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8) {
         return _calculateWithDebugInfo.apply(this, arguments);
       }
       return calculateWithDebugInfo;
@@ -237,7 +342,7 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
               });
             case 7:
               _context2.next = 9;
-              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason);
+              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, orderedEntries);
             case 9:
               vcDetails = _context2.sent;
               result = {
@@ -256,7 +361,7 @@ var AbstractVCCalculatorBase = exports.default = /*#__PURE__*/function () {
           }
         }, _callee2, this);
       }));
-      function calculate(_x8) {
+      function calculate(_x9) {
         return _calculate.apply(this, arguments);
       }
       return calculate;

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

@@ -10,6 +10,7 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _vcUtils = require("../../vc-observer/media-wrapper/vc-utils");
 var _isNonVisualStyleMutation = _interopRequireDefault(require("../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation"));
+var _rllPlaceholders = require("../../vc-observer/observers/rll-placeholders");
 var _intersectionObserver = require("./intersection-observer");
 var _mutationObserver = _interopRequireDefault(require("./mutation-observer"));
 var _performanceObserver = _interopRequireDefault(require("./performance-observer"));
@@ -48,6 +49,10 @@ function sameRectDimensions(a, b) {
 var createElementMutationsWatcher = function createElementMutationsWatcher(removedNodeRects) {
   return function (_ref) {
     var rect = _ref.rect;
+    var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+    if (isRLLPlaceholder) {
+      return 'mutation:rll-placeholder';
+    }
     var wasDeleted = removedNodeRects.some(function (nr) {
       return sameRectDimensions(nr, rect);
     });
@@ -153,6 +158,17 @@ var ViewportObserver = exports.default = /*#__PURE__*/function () {
             }
           };
         }
+        var isRLLPlaceholder = _rllPlaceholders.RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+        if (isRLLPlaceholder) {
+          return {
+            type: 'mutation:rll-placeholder',
+            mutationData: {
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
+            }
+          };
+        }
         var lastElementRect = _this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {

package/dist/es2019/vc/index.js

@@ -3,6 +3,7 @@ import { isVCRevisionEnabled } from '../config';
 import { VCObserverNOOP } from './no-op-vc-observer';
 import { VCObserver } from './vc-observer';
 import VCObserverNew from './vc-observer-new';
+import { RLLPlaceholderHandlers } from './vc-observer/observers/rll-placeholders';
 export class VCObserverWrapper {
   constructor(opts = {}) {
     this.newVCObserver = null;
@@ -66,6 +67,7 @@ export class VCObserverWrapper {
       var _this$newVCObserver2;
       (_this$newVCObserver2 = this.newVCObserver) === null || _this$newVCObserver2 === void 0 ? void 0 : _this$newVCObserver2.stop();
     }
+    RLLPlaceholderHandlers.getInstance().reset();
   }
   getVCRawData() {
     var _this$oldVCObserver$g, _this$oldVCObserver3;

package/dist/es2019/vc/vc-observer/getVCRevisionDebugDetails.js

@@ -6,16 +6,44 @@ export function getVCRevisionDebugDetails({
   componentsLog,
   interactionId
 }) {
-  return {
-    revision,
-    isClean,
-    abortReason,
-    vcLogs: VCEntries.map(entry => ({
+  // Pre-sort VCEntries by time for efficient lookups
+  const sortedVCEntries = [...VCEntries].sort((a, b) => a.time - b.time);
+
+  // Pre-calculate max viewport percentage up to each time for efficient lookups
+  const maxViewportPercentageAtTime = new Map();
+  let maxSoFar = 0;
+  for (const entry of sortedVCEntries) {
+    maxSoFar = Math.max(maxSoFar, entry.vc);
+    maxViewportPercentageAtTime.set(entry.time, maxSoFar);
+  }
+
+  // Helper function to find the biggest previous viewport percentage
+  const getBiggestPreviousViewportPercentage = targetTime => {
+    // Binary search for the largest time <= targetTime
+    let left = 0;
+    let right = sortedVCEntries.length - 1;
+    let result = -1;
+    while (left <= right) {
+      const mid = Math.floor((left + right) / 2);
+      if (sortedVCEntries[mid].time <= targetTime) {
+        result = mid;
+        left = mid + 1;
+      } else {
+        right = mid - 1;
+      }
+    }
+    return result >= 0 ? maxViewportPercentageAtTime.get(sortedVCEntries[result].time) || null : null;
+  };
+  const allVcLogs = [];
+
+  // Add regular VC entries
+  for (const entry of VCEntries) {
+    const timeLogEntries = componentsLog[entry.time];
+    allVcLogs.push({
       time: entry.time,
       viewportPercentage: entry.vc,
       entries: entry.elements.map(element => {
-        var _componentsLog$entry$;
-        const logEntry = (_componentsLog$entry$ = componentsLog[entry.time]) === null || _componentsLog$entry$ === void 0 ? void 0 : _componentsLog$entry$.find(log => log.targetName === element);
+        const logEntry = timeLogEntries === null || timeLogEntries === void 0 ? void 0 : timeLogEntries.find(log => log.targetName === element);
         return {
           elementName: element,
           type: logEntry === null || logEntry === void 0 ? void 0 : logEntry.type,
@@ -23,10 +51,44 @@ export function getVCRevisionDebugDetails({
           visible: true,
           attributeName: logEntry === null || logEntry === void 0 ? void 0 : logEntry.attributeName,
           oldValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.oldValue,
-          newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue
+          newValue: logEntry === null || logEntry === void 0 ? void 0 : logEntry.newValue,
+          ignoreReason: logEntry === null || logEntry === void 0 ? void 0 : logEntry.ignoreReason
         };
       })
-    })),
+    });
+  }
+
+  // Add ignored elements - only process timestamps that have ignored elements
+  for (const [timestamp, timeLogEntries] of Object.entries(componentsLog)) {
+    const ignoredElements = timeLogEntries.filter(log => log.ignoreReason);
+    if (ignoredElements.length === 0) {
+      continue;
+    }
+    const time = Number(timestamp);
+    const viewportPercentage = getBiggestPreviousViewportPercentage(time);
+    allVcLogs.push({
+      time,
+      viewportPercentage,
+      entries: ignoredElements.map(logEntry => ({
+        elementName: logEntry.targetName,
+        type: logEntry.type,
+        rect: logEntry.intersectionRect,
+        visible: false,
+        attributeName: logEntry.attributeName,
+        oldValue: logEntry.oldValue,
+        newValue: logEntry.newValue,
+        ignoreReason: logEntry.ignoreReason
+      }))
+    });
+  }
+
+  // Sort once at the end
+  allVcLogs.sort((a, b) => a.time - b.time);
+  return {
+    revision,
+    isClean,
+    abortReason,
+    vcLogs: allVcLogs,
     interactionId
   };
 }

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

@@ -282,42 +282,48 @@ export class VCObserver {
               entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
             }
           }));
-          const v1RevisionDebugDetails = getVCRevisionDebugDetails({
-            revision: 'fy25.01',
-            isClean: !abortReasonInfo,
-            abortReason: abortReason.reason,
-            VCEntries: VCEntries.rel,
-            componentsLog,
-            interactionId
-          });
-          const v2RevisionDebugDetails = getVCRevisionDebugDetails({
-            revision: 'fy25.02',
-            isClean: !abortReasonInfo,
-            abortReason: abortReason.reason,
-            VCEntries: vcNext.VCEntries.rel,
-            componentsLog,
-            interactionId
-          });
+        }
+        if (!this.isPostInteraction) {
+          // Only create revision debug details if callbacks exist
+          const shouldCreateDebugDetails = typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' || typeof window.__on_ufo_vc_debug_data_ready === 'function' && fg('platform_ufo_emit_vc_debug_data');
+          if (shouldCreateDebugDetails) {
+            const v1RevisionDebugDetails = getVCRevisionDebugDetails({
+              revision: 'fy25.01',
+              isClean: !abortReasonInfo,
+              abortReason: abortReason.reason,
+              VCEntries: VCEntries.rel,
+              componentsLog,
+              interactionId
+            });
+            const v2RevisionDebugDetails = getVCRevisionDebugDetails({
+              revision: 'fy25.02',
+              isClean: !abortReasonInfo,
+              abortReason: abortReason.reason,
+              VCEntries: vcNext.VCEntries.rel,
+              componentsLog,
+              interactionId
+            });
 
-          // Add devtool callback for both v1 and v2
-          if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
-            var _window$__ufo_devtool2, _window2;
-            // Handle v1 if not disabled
-            if (!isTTVCv1Disabled) {
-              var _window$__ufo_devtool, _window;
-              (_window$__ufo_devtool = (_window = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool === void 0 ? void 0 : _window$__ufo_devtool.call(_window, v1RevisionDebugDetails);
-            }
+            // Add devtool callback for both v1 and v2
+            if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
+              var _window$__ufo_devtool2, _window2;
+              // Handle v1 if not disabled
+              if (!isTTVCv1Disabled) {
+                var _window$__ufo_devtool, _window;
+                (_window$__ufo_devtool = (_window = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool === void 0 ? void 0 : _window$__ufo_devtool.call(_window, v1RevisionDebugDetails);
+              }
 
-            // Handle v2
-            (_window$__ufo_devtool2 = (_window2 = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool2 === void 0 ? void 0 : _window$__ufo_devtool2.call(_window2, v2RevisionDebugDetails);
-          }
-          if (typeof window.__on_ufo_vc_debug_data_ready === 'function' && fg('platform_ufo_emit_vc_debug_data')) {
-            var _window$__on_ufo_vc_d2, _window4;
-            if (!isTTVCv1Disabled) {
-              var _window$__on_ufo_vc_d, _window3;
-              (_window$__on_ufo_vc_d = (_window3 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d === void 0 ? void 0 : _window$__on_ufo_vc_d.call(_window3, v1RevisionDebugDetails);
+              // Handle v2
+              (_window$__ufo_devtool2 = (_window2 = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool2 === void 0 ? void 0 : _window$__ufo_devtool2.call(_window2, v2RevisionDebugDetails);
+            }
+            if (typeof window.__on_ufo_vc_debug_data_ready === 'function' && fg('platform_ufo_emit_vc_debug_data')) {
+              var _window$__on_ufo_vc_d2, _window4;
+              if (!isTTVCv1Disabled) {
+                var _window$__on_ufo_vc_d, _window3;
+                (_window$__on_ufo_vc_d = (_window3 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d === void 0 ? void 0 : _window$__on_ufo_vc_d.call(_window3, v1RevisionDebugDetails);
+              }
+              (_window$__on_ufo_vc_d2 = (_window4 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d2 === void 0 ? void 0 : _window$__on_ufo_vc_d2.call(_window4, v2RevisionDebugDetails);
             }
-            (_window$__on_ufo_vc_d2 = (_window4 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d2 === void 0 ? void 0 : _window$__on_ufo_vc_d2.call(_window4, v2RevisionDebugDetails);
           }
         }
       } catch (e) {

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
 import isNonVisualStyleMutation from './non-visual-styles/is-non-visual-style-mutation';
+import { RLLPlaceholderHandlers } from './rll-placeholders';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 const state = {
   normal: 1,
@@ -244,6 +245,9 @@ export class Observers {
           if (!isElementVisible(target)) {
             data.ignoreReason = 'not-visible';
           }
+          if (RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(ir)) {
+            data.ignoreReason = 'rll-placeholder';
+          }
           this.callbacks.forEach(callback => {
             let elementName;
             try {

package/dist/es2019/vc/vc-observer/observers/rll-placeholders/index.js

@@ -0,0 +1,182 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
+const GLOBAL_RLL_HANDLERS_KEY = '__REACT_UFO_RLL_PLACEHOLDER_HANDLERS__';
+export class RLLPlaceholderHandlers {
+  constructor() {
+    _defineProperty(this, "placeholders", []);
+    if (typeof window !== 'undefined' && typeof document !== 'undefined' && typeof window.document !== 'undefined') {
+      this.collectRLLPlaceholders();
+    }
+  }
+
+  /**
+   * Gets the global singleton instance of RLLPlaceholderHandlers.
+   * Creates the instance if it doesn't exist and stores it in globalThis.
+   * @returns The singleton instance of RLLPlaceholderHandlers
+   */
+  static getInstance() {
+    if (typeof globalThis !== 'undefined') {
+      if (!globalThis[GLOBAL_RLL_HANDLERS_KEY]) {
+        globalThis[GLOBAL_RLL_HANDLERS_KEY] = new RLLPlaceholderHandlers();
+      }
+      return globalThis[GLOBAL_RLL_HANDLERS_KEY];
+    }
+
+    // Fallback for environments without globalThis (should be rare)
+    return new RLLPlaceholderHandlers();
+  }
+  reset() {
+    this.placeholders = [];
+  }
+
+  /**
+   * Collects all React Loosely Lazy (RLL) placeholders from the DOM and caches their viewport intersecting rectangles.
+   * RLL placeholders are marked with data-lazy-begin and data-lazy-end attributes on hidden input elements.
+   * Performance optimized to batch getBoundingClientRect calls and minimize layout thrashing.
+   * Only stores the intersecting portions of rectangles that are currently visible in the viewport.
+   */
+  collectRLLPlaceholders() {
+    if (typeof window === 'undefined' || typeof document === 'undefined' || typeof window.document === 'undefined') {
+      return;
+    }
+    if (!fg('platform_ufo_rll_placeholder_ignore')) {
+      return;
+    }
+    const beginElements = document.querySelectorAll('input[data-lazy-begin]');
+    const beginCount = beginElements.length;
+    if (beginCount === 0) {
+      return;
+    }
+
+    // Performance optimization: pre-allocate array with estimated size
+    const allElements = [];
+
+    // Performance optimization: use traditional for loop instead of forEach
+    for (let i = 0; i < beginCount; i++) {
+      const beginEl = beginElements[i];
+      const id = beginEl.getAttribute('data-lazy-begin');
+      if (!id) {
+        continue;
+      }
+      const elements = this.refElements(beginEl, id);
+      if (elements.length > 0) {
+        allElements.push(...elements);
+      }
+    }
+
+    // Second pass: batch all getBoundingClientRect calls to minimize reflow cycles
+    const allElementsLength = allElements.length;
+    if (allElementsLength > 0) {
+      // Performance optimization: pre-allocate array with exact size
+      const intersectingRects = [];
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      for (let i = 0; i < allElementsLength; i++) {
+        const rect = allElements[i].getBoundingClientRect();
+
+        // Performance optimization: inline intersection calculation to avoid function call overhead
+        const left = Math.max(rect.left, 0);
+        const top = Math.max(rect.top, 0);
+        const right = Math.min(rect.right, windowWidth);
+        const bottom = Math.min(rect.bottom, windowHeight);
+
+        // Check if there's a valid intersection with non-zero width and height
+        if (left < right && top < bottom) {
+          intersectingRects.push(new DOMRect(left, top, right - left, bottom - top));
+        }
+      }
+      this.placeholders = intersectingRects;
+    }
+  }
+
+  /**
+   * Traverses DOM siblings to find all elements between RLL begin and end markers.
+   * Based on the refElements pattern from react-loosely-lazy's platform/packages/async/react-loosely-lazy/src/collect/hydrate.ts
+   * Performance optimized to minimize iterations and early exit conditions.
+   *
+   * @param fromEl - The input element with data-lazy-begin attribute
+   * @param id - The placeholder ID to match against data-lazy-end
+   * @returns Array of DOM elements between the begin/end markers
+   */
+  refElements(fromEl, id) {
+    const result = [];
+    let el = fromEl.nextSibling;
+
+    // Performance optimization: use while loop instead of recursive calls
+    while (el) {
+      var _el$dataset;
+      if (((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.lazyEnd) === id) {
+        break;
+      }
+      if (el.nodeType === Node.ELEMENT_NODE) {
+        result.push(el);
+      }
+      el = el.nextSibling;
+    }
+    return result;
+  }
+
+  /**
+   * Returns the cached intersecting viewport rectangles for all RLL placeholder elements.
+   * @returns Array of DOMRect objects representing the intersecting portions of placeholders within the viewport
+   */
+  getPlaceholders() {
+    return this.placeholders;
+  }
+
+  /**
+   * Checks if the given intersecting rectangle matches any of the cached RLL placeholder intersecting rectangles.
+   * This is designed to be called from IntersectionObserver with the intersectionRect.
+   * Performance optimized with early exits and minimal calculations.
+   * @param intersectingRect - The intersecting rectangle from IntersectionObserver
+   * @returns true if the intersecting rectangle matches a cached placeholder rectangle and hasn't exceeded match limit, false otherwise
+   */
+  isRLLPlaceholderHydration(intersectingRect) {
+    const placeholdersLength = this.placeholders.length;
+    if (placeholdersLength === 0) {
+      return false;
+    }
+
+    // Performance optimization: cache array length and use traditional for loop
+    for (let i = 0; i < placeholdersLength; i++) {
+      const placeholderRect = this.placeholders[i];
+      if (this.areRectsEqual(intersectingRect, placeholderRect)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  /**
+   * Compares two DOMRect objects for equality with ±1 pixel tolerance.
+   * Performance optimized to minimize calculations and early exit on major differences.
+   * @param rect1 - First rectangle to compare
+   * @param rect2 - Second rectangle to compare
+   * @returns true if rectangles are within 1 pixel tolerance for all properties
+   */
+  areRectsEqual(rect1, rect2) {
+    // Early exit for exact matches (most common case)
+    if (rect1.left === rect2.left && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom) {
+      return true;
+    }
+
+    // Performance optimization: check largest differences first for early exit
+    const leftDiff = rect1.left - rect2.left;
+    if (leftDiff > 1 || leftDiff < -1) {
+      return false;
+    }
+    const rightDiff = rect1.right - rect2.right;
+    if (rightDiff > 1 || rightDiff < -1) {
+      return false;
+    }
+    const topDiff = rect1.top - rect2.top;
+    if (topDiff > 1 || topDiff < -1) {
+      return false;
+    }
+    const bottomDiff = rect1.bottom - rect2.bottom;
+    if (bottomDiff > 1 || bottomDiff < -1) {
+      return false;
+    }
+    return true;
+  }
+}