@atlaskit/media-viewer 52.4.5 → 52.4.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/media-viewer
 
+## 52.4.7
+
+### Patch Changes
+
+- [#185556](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/185556)
+  [`8aa55d31f5ace`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8aa55d31f5ace) -
+  Added featureFlags attribute to loadSucceded event to trace performance changes per feature flag
+- Updated dependencies
+
+## 52.4.6
+
+### Patch Changes
+
+- [#183808](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183808)
+  [`4436100210ca9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4436100210ca9) -
+  Added spinner to document viewer
+- Updated dependencies
+
 ## 52.4.5
 
 ### Patch Changes

package/dist/cjs/analytics/events/operational/loadSucceeded.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createLoadSucceededEvent = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var createLoadSucceededEvent = exports.createLoadSucceededEvent = function createLoadSucceededEvent(_ref, traceContext) {
   var fileId = _ref.fileId,
     fileMediatype = _ref.fileMediatype,
@@ -23,7 +24,10 @@ var createLoadSucceededEvent = exports.createLoadSucceededEvent = function creat
         fileMimetype: fileMimetype,
         fileSize: fileSize
       },
-      traceContext: fileMediatype === 'image' ? traceContext : undefined
+      traceContext: fileMediatype === 'image' ? traceContext : undefined,
+      featureFlags: {
+        media_document_viewer: (0, _platformFeatureFlags.fg)('media_document_viewer')
+      }
     }
   };
 };

package/dist/cjs/analytics/index.js

@@ -10,7 +10,7 @@ exports.packageVersion = exports.packageName = void 0;
 var _analytics = require("@atlaskit/media-common/analytics");
 var componentName = exports.component = exports.componentName = 'mediaViewer';
 var packageName = exports.packageName = "@atlaskit/media-viewer";
-var packageVersion = exports.packageVersion = "52.4.4";
+var packageVersion = exports.packageVersion = "52.4.6";
 function getFileAttributes(fileState) {
   if (!fileState) {
     return {

package/dist/cjs/analytics/ufoExperiences.js

@@ -9,10 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _ufo = require("@atlaskit/ufo");
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaCommon = require("@atlaskit/media-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.4";
+var packageVersion = "52.4.6";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {
@@ -37,7 +38,8 @@ var succeedMediaFileUfoExperience = exports.succeedMediaFileUfoExperience = func
       packageName: packageName,
       packageVersion: packageVersion,
       mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
-      mediaRegion: (0, _mediaClient.getMediaRegion)()
+      mediaRegion: (0, _mediaClient.getMediaRegion)(),
+      isMediaDocumentViewerEnabled: (0, _platformFeatureFlags.fg)('media_document_viewer')
     })
   });
 };
@@ -46,7 +48,8 @@ var failMediaFileUfoExperience = exports.failMediaFileUfoExperience = function f
     packageName: packageName,
     packageVersion: packageVersion,
     mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
-    mediaRegion: (0, _mediaClient.getMediaRegion)()
+    mediaRegion: (0, _mediaClient.getMediaRegion)(),
+    isMediaDocumentViewerEnabled: (0, _platformFeatureFlags.fg)('media_document_viewer')
   });
   getExperience().failure({
     metadata: refinedMetadata

package/dist/cjs/viewers/doc-next/doc-viewer.compiled.css

@@ -1,4 +1,8 @@
 ._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
 ._1bsbauwl{width:100vw}
+._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
-._4t3i1kxc{height:100vh}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._kqswstnw{position:absolute}

package/dist/cjs/viewers/doc-next/doc-viewer.js

@@ -8,13 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DocViewer = void 0;
 require("./doc-viewer.compiled.css");
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
 var _mediaClient = require("@atlaskit/media-client");
 var _mediaDocumentViewer = require("@atlaskit/media-document-viewer");
 var _mediaCommon = require("@atlaskit/media-common");
@@ -22,6 +21,7 @@ var _errors = require("../../errors");
 var _zoomControls = require("../../zoomControls");
 var _zoomLevel = require("../../domain/zoomLevel");
 var _passwordInput = require("./passwordInput");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -29,7 +29,8 @@ var initialState = {
   isMissingPassword: false,
   hasPasswordError: false,
   password: '',
-  zoomLevel: new _zoomLevel.ZoomLevel(1.75)
+  zoomLevel: new _zoomLevel.ZoomLevel(1.75),
+  isLoading: true
 };
 var reducer = function reducer(state, action) {
   switch (action.type) {
@@ -54,11 +55,16 @@ var reducer = function reducer(state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         isMissingPassword: true
       });
+    case 'loading_completed':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isLoading: false
+      });
     default:
       return state;
   }
 };
 var documentViewerStyles = null;
+var spinnerStyles = null;
 var DocViewer = exports.DocViewer = function DocViewer(_ref) {
   var mediaClient = _ref.mediaClient,
     fileState = _ref.fileState,
@@ -175,6 +181,12 @@ var DocViewer = exports.DocViewer = function DocViewer(_ref) {
       return _ref4.apply(this, arguments);
     };
   }());
+  var onSuccessHandler = (0, _mediaCommon.useStaticCallback)(function () {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 || onSuccess();
+  });
   var onZoomChange = (0, _mediaCommon.useStaticCallback)(function (newZoomLevel) {
     dispatch({
       type: 'set_zoom_level',
@@ -182,22 +194,30 @@ var DocViewer = exports.DocViewer = function DocViewer(_ref) {
     });
   });
   if (state.isMissingPassword) {
-    return /*#__PURE__*/React.createElement(_passwordInput.PasswordInput, {
+    return /*#__PURE__*/_react.default.createElement(_passwordInput.PasswordInput, {
       onSubmit: onPasswordSubmit,
       hasPasswordError: state.hasPasswordError
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, state.isLoading && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _runtime.ax)(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
     id: _mediaDocumentViewer.DOCUMENT_SCROLL_ROOT_ID,
     className: (0, _runtime.ax)(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
-  }, /*#__PURE__*/React.createElement(_mediaDocumentViewer.DocumentViewer, {
+  }, /*#__PURE__*/_react.default.createElement(_mediaDocumentViewer.DocumentViewer, {
     getContent: getContent,
     getPageImageUrl: getPageImageUrl,
     zoom: state.zoomLevel.value,
-    onSuccess: onSuccess
-  }), /*#__PURE__*/React.createElement(_zoomControls.ZoomControls, {
+    onSuccess: onSuccessHandler
+  }), /*#__PURE__*/_react.default.createElement(_zoomControls.ZoomControls, {
     onChange: onZoomChange,
     zoomLevel: state.zoomLevel
-  }));
+  })));
 };
 var _default = exports.default = DocViewer;

package/dist/es2019/analytics/events/operational/loadSucceeded.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export const createLoadSucceededEvent = ({
   fileId,
   fileMediatype,
@@ -18,7 +19,10 @@ export const createLoadSucceededEvent = ({
         fileMimetype,
         fileSize
       },
-      traceContext: fileMediatype === 'image' ? traceContext : undefined
+      traceContext: fileMediatype === 'image' ? traceContext : undefined,
+      featureFlags: {
+        media_document_viewer: fg('media_document_viewer')
+      }
     }
   };
 };

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 const componentName = 'mediaViewer';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "52.4.4";
+const packageVersion = "52.4.6";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/es2019/analytics/ufoExperiences.js

@@ -1,8 +1,9 @@
 import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 const packageName = "@atlaskit/media-viewer";
-const packageVersion = "52.4.4";
+const packageVersion = "52.4.6";
 let ufoExperience;
 const getExperience = () => {
   if (!ufoExperience) {
@@ -28,7 +29,8 @@ export const succeedMediaFileUfoExperience = properties => {
       packageName,
       packageVersion,
       mediaEnvironment: getMediaEnvironment(),
-      mediaRegion: getMediaRegion()
+      mediaRegion: getMediaRegion(),
+      isMediaDocumentViewerEnabled: fg('media_document_viewer')
     }
   });
 };
@@ -38,7 +40,8 @@ export const failMediaFileUfoExperience = properties => {
     packageName,
     packageVersion,
     mediaEnvironment: getMediaEnvironment(),
-    mediaRegion: getMediaRegion()
+    mediaRegion: getMediaRegion(),
+    isMediaDocumentViewerEnabled: fg('media_document_viewer')
   };
   getExperience().failure({
     metadata: refinedMetadata

package/dist/es2019/viewers/doc-next/doc-viewer.compiled.css

@@ -1,4 +1,8 @@
 ._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
 ._1bsbauwl{width:100vw}
+._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
-._4t3i1kxc{height:100vh}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._kqswstnw{position:absolute}

package/dist/es2019/viewers/doc-next/doc-viewer.js

@@ -1,8 +1,7 @@
 /* doc-viewer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./doc-viewer.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import { useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { isCommonMediaClientError } from '@atlaskit/media-client';
 import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
 import { useStaticCallback } from '@atlaskit/media-common';
@@ -10,11 +9,13 @@ import { MediaViewerError } from '../../errors';
 import { ZoomControls } from '../../zoomControls';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { PasswordInput } from './passwordInput';
+import Spinner from '@atlaskit/spinner';
 const initialState = {
   isMissingPassword: false,
   hasPasswordError: false,
   password: '',
-  zoomLevel: new ZoomLevel(1.75)
+  zoomLevel: new ZoomLevel(1.75),
+  isLoading: true
 };
 const reducer = (state, action) => {
   switch (action.type) {
@@ -44,11 +45,17 @@ const reducer = (state, action) => {
         ...state,
         isMissingPassword: true
       };
+    case 'loading_completed':
+      return {
+        ...state,
+        isLoading: false
+      };
     default:
       return state;
   }
 };
 const documentViewerStyles = null;
+const spinnerStyles = null;
 export const DocViewer = ({
   mediaClient,
   fileState,
@@ -112,6 +119,12 @@ export const DocViewer = ({
     }, traceContext);
     return URL.createObjectURL(src);
   });
+  const onSuccessHandler = useStaticCallback(() => {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+  });
   const onZoomChange = useStaticCallback(newZoomLevel => {
     dispatch({
       type: 'set_zoom_level',
@@ -124,17 +137,25 @@ export const DocViewer = ({
       hasPasswordError: state.hasPasswordError
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isLoading && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
     id: DOCUMENT_SCROLL_ROOT_ID,
     className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
   }, /*#__PURE__*/React.createElement(DocumentViewer, {
     getContent: getContent,
     getPageImageUrl: getPageImageUrl,
     zoom: state.zoomLevel.value,
-    onSuccess: onSuccess
+    onSuccess: onSuccessHandler
   }), /*#__PURE__*/React.createElement(ZoomControls, {
     onChange: onZoomChange,
     zoomLevel: state.zoomLevel
-  }));
+  })));
 };
 export default DocViewer;

package/dist/esm/analytics/events/operational/loadSucceeded.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref, traceContext) {
   var fileId = _ref.fileId,
     fileMediatype = _ref.fileMediatype,
@@ -17,7 +18,10 @@ export var createLoadSucceededEvent = function createLoadSucceededEvent(_ref, tr
         fileMimetype: fileMimetype,
         fileSize: fileSize
       },
-      traceContext: fileMediatype === 'image' ? traceContext : undefined
+      traceContext: fileMediatype === 'image' ? traceContext : undefined,
+      featureFlags: {
+        media_document_viewer: fg('media_document_viewer')
+      }
     }
   };
 };

package/dist/esm/analytics/index.js

@@ -1,7 +1,7 @@
 import { ANALYTICS_MEDIA_CHANNEL, sanitiseAnalyticsPayload } from '@atlaskit/media-common/analytics';
 var componentName = 'mediaViewer';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.4";
+var packageVersion = "52.4.6";
 export { packageName, packageVersion, componentName, componentName as component };
 export function getFileAttributes(fileState) {
   if (!fileState) {

package/dist/esm/analytics/ufoExperiences.js

@@ -4,8 +4,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { UFOExperience, ExperiencePerformanceTypes, ExperienceTypes } from '@atlaskit/ufo';
 import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getFeatureFlagKeysAllProducts } from '@atlaskit/media-common';
+import { fg } from '@atlaskit/platform-feature-flags';
 var packageName = "@atlaskit/media-viewer";
-var packageVersion = "52.4.4";
+var packageVersion = "52.4.6";
 var ufoExperience;
 var getExperience = function getExperience() {
   if (!ufoExperience) {
@@ -30,7 +31,8 @@ export var succeedMediaFileUfoExperience = function succeedMediaFileUfoExperienc
       packageName: packageName,
       packageVersion: packageVersion,
       mediaEnvironment: getMediaEnvironment(),
-      mediaRegion: getMediaRegion()
+      mediaRegion: getMediaRegion(),
+      isMediaDocumentViewerEnabled: fg('media_document_viewer')
     })
   });
 };
@@ -39,7 +41,8 @@ export var failMediaFileUfoExperience = function failMediaFileUfoExperience(prop
     packageName: packageName,
     packageVersion: packageVersion,
     mediaEnvironment: getMediaEnvironment(),
-    mediaRegion: getMediaRegion()
+    mediaRegion: getMediaRegion(),
+    isMediaDocumentViewerEnabled: fg('media_document_viewer')
   });
   getExperience().failure({
     metadata: refinedMetadata

package/dist/esm/viewers/doc-next/doc-viewer.compiled.css

@@ -1,4 +1,8 @@
 ._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
 ._1bsbauwl{width:100vw}
+._1e0c1txw{display:flex}
 ._1reo1wug{overflow-x:auto}
-._4t3i1kxc{height:100vh}
+._4cvr1h6o{align-items:center}
+._4t3i1kxc{height:100vh}
+._kqswstnw{position:absolute}

package/dist/esm/viewers/doc-next/doc-viewer.js

@@ -3,12 +3,11 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./doc-viewer.compiled.css";
-import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 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) { _defineProperty(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; }
-import { useReducer } from 'react';
+import React, { useReducer } from 'react';
 import { isCommonMediaClientError } from '@atlaskit/media-client';
 import { DOCUMENT_SCROLL_ROOT_ID, DocumentViewer } from '@atlaskit/media-document-viewer';
 import { useStaticCallback } from '@atlaskit/media-common';
@@ -16,11 +15,13 @@ import { MediaViewerError } from '../../errors';
 import { ZoomControls } from '../../zoomControls';
 import { ZoomLevel } from '../../domain/zoomLevel';
 import { PasswordInput } from './passwordInput';
+import Spinner from '@atlaskit/spinner';
 var initialState = {
   isMissingPassword: false,
   hasPasswordError: false,
   password: '',
-  zoomLevel: new ZoomLevel(1.75)
+  zoomLevel: new ZoomLevel(1.75),
+  isLoading: true
 };
 var reducer = function reducer(state, action) {
   switch (action.type) {
@@ -45,11 +46,16 @@ var reducer = function reducer(state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         isMissingPassword: true
       });
+    case 'loading_completed':
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isLoading: false
+      });
     default:
       return state;
   }
 };
 var documentViewerStyles = null;
+var spinnerStyles = null;
 export var DocViewer = function DocViewer(_ref) {
   var mediaClient = _ref.mediaClient,
     fileState = _ref.fileState,
@@ -166,6 +172,12 @@ export var DocViewer = function DocViewer(_ref) {
       return _ref4.apply(this, arguments);
     };
   }());
+  var onSuccessHandler = useStaticCallback(function () {
+    dispatch({
+      type: 'loading_completed'
+    });
+    onSuccess === null || onSuccess === void 0 || onSuccess();
+  });
   var onZoomChange = useStaticCallback(function (newZoomLevel) {
     dispatch({
       type: 'set_zoom_level',
@@ -178,17 +190,25 @@ export var DocViewer = function DocViewer(_ref) {
       hasPasswordError: state.hasPasswordError
     });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.isLoading && /*#__PURE__*/React.createElement("div", {
+    className: ax(["_kqswstnw _1e0c1txw _1bah1h6o _4cvr1h6o"])
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "large",
+    appearance: "invert"
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      opacity: state.isLoading ? 0 : 1
+    },
     id: DOCUMENT_SCROLL_ROOT_ID,
     className: ax(["_1reo1wug _18m91wug _4t3i1kxc _1bsbauwl"])
   }, /*#__PURE__*/React.createElement(DocumentViewer, {
     getContent: getContent,
     getPageImageUrl: getPageImageUrl,
     zoom: state.zoomLevel.value,
-    onSuccess: onSuccess
+    onSuccess: onSuccessHandler
   }), /*#__PURE__*/React.createElement(ZoomControls, {
     onChange: onZoomChange,
     zoomLevel: state.zoomLevel
-  }));
+  })));
 };
 export default DocViewer;

package/dist/types/analytics/events/operational/loadSucceeded.d.ts

@@ -1,5 +1,11 @@
 import { type SuccessAttributes, type WithFileAttributes, type FileAttributes, type MediaTraceContext, type WithTraceContext } from '@atlaskit/media-common';
 import { type MediaFileEventPayload } from './_mediaFile';
-export type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes & WithTraceContext;
+type WithFeatureFlags = {
+    featureFlags: {
+        media_document_viewer: boolean;
+    };
+};
+export type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes & WithTraceContext & WithFeatureFlags;
 export type LoadSucceededEventPayload = MediaFileEventPayload<LoadSucceededAttributes, 'loadSucceeded'>;
 export declare const createLoadSucceededEvent: ({ fileId, fileMediatype, fileMimetype, fileSize }: FileAttributes, traceContext?: MediaTraceContext) => LoadSucceededEventPayload;
+export {};

package/dist/types-ts4.5/analytics/events/operational/loadSucceeded.d.ts

@@ -1,5 +1,11 @@
 import { type SuccessAttributes, type WithFileAttributes, type FileAttributes, type MediaTraceContext, type WithTraceContext } from '@atlaskit/media-common';
 import { type MediaFileEventPayload } from './_mediaFile';
-export type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes & WithTraceContext;
+type WithFeatureFlags = {
+    featureFlags: {
+        media_document_viewer: boolean;
+    };
+};
+export type LoadSucceededAttributes = SuccessAttributes & WithFileAttributes & WithTraceContext & WithFeatureFlags;
 export type LoadSucceededEventPayload = MediaFileEventPayload<LoadSucceededAttributes, 'loadSucceeded'>;
 export declare const createLoadSucceededEvent: ({ fileId, fileMediatype, fileMimetype, fileSize }: FileAttributes, traceContext?: MediaTraceContext) => LoadSucceededEventPayload;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-viewer",
-	"version": "52.4.5",
+	"version": "52.4.7",
 	"description": "MediaViewer is Atlassian's powerful solution for viewing files on the web. It's both powerful and extendable yet easy-to-integrate",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,7 +44,7 @@
 		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-lab": "^5.1.0",
-		"@atlaskit/media-client": "^35.0.0",
+		"@atlaskit/media-client": "^35.1.0",
 		"@atlaskit/media-client-react": "^4.1.0",
 		"@atlaskit/media-common": "^12.3.0",
 		"@atlaskit/media-document-viewer": "^0.3.0",
@@ -57,7 +57,7 @@
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/tokens": "^5.5.0",
 		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -90,7 +90,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/media-core": "^37.0.0",
 		"@atlaskit/media-integration-test-helpers": "workspace:^",
-		"@atlaskit/media-state": "^1.7.0",
+		"@atlaskit/media-state": "^1.8.0",
 		"@atlaskit/media-test-data": "^3.2.0",
 		"@atlaskit/media-test-helpers": "^37.0.0",
 		"@atlaskit/ssr": "workspace:^",