@atlaskit/link-picker 1.24.1 → 1.25.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/link-picker
 
+## 1.25.0
+
+### Minor Changes
+
+- [`bf9689fce97`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf9689fce97) - [ux] Modified behaviour to load to all plugins before Link Picker UI is loaded, introduces a isLoading attribute to
+  indicate when a plugins have loaded
+
 ## 1.24.1
 
 ### Patch Changes

package/dist/cjs/ui/link-picker/form-footer/index.js

@@ -16,7 +16,7 @@ var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
 var _styled = require("./styled");
 var _utils = require("./utils");
 var _errors = require("../../../common/utils/errors");
-var _excluded = ["isLoading", "error", "state", "items", "isEditing", "onCancel", "action"];
+var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action"];
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -46,7 +46,8 @@ exports.testIds = testIds;
 var FormFooter = function FormFooter(_ref) {
   var isLoading = _ref.isLoading,
     error = _ref.error,
-    state = _ref.state,
+    url = _ref.url,
+    queryState = _ref.queryState,
     items = _ref.items,
     isEditing = _ref.isEditing,
     onCancel = _ref.onCancel,
@@ -56,7 +57,7 @@ var FormFooter = function FormFooter(_ref) {
   if (error && error instanceof _errors.UnauthenticatedError) {
     return null;
   }
-  var isSubmitDisabled = (0, _utils.checkSubmitDisabled)(isLoading, error, state, items);
+  var isSubmitDisabled = (0, _utils.checkSubmitDisabled)(isLoading, error, url, queryState, items);
   var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   return (0, _react.jsx)("footer", (0, _extends2.default)({
     css: _styled.formFooterStyles

package/dist/cjs/ui/link-picker/form-footer/utils.js

@@ -5,12 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.checkSubmitDisabled = void 0;
 var _url = require("@atlaskit/linking-common/url");
-var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, state, items) {
+var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, url, queryState, items) {
   /*
    * Enable insert when search term is a valid url and it can be normalized
    * Need to explicitly enable it here otherwise next condition could meet
+   *
+   * This should effectively be the validation function for the form, ie if the form
+   * could be submitted, then it should not be disabled
    */
-  if (state && (0, _url.normalizeUrl)(state.query)) {
+  if (url && (0, _url.normalizeUrl)(url)) {
     return false;
   }
 
@@ -18,7 +21,7 @@ var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, state,
    * Disable insert button when plugin returns no results,
    * but not if it is a valid url
    */
-  if (state && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+  if (queryState && (items === null || items === void 0 ? void 0 : items.length) === 0) {
     return true;
   }
 

package/dist/cjs/ui/link-picker/index.js

@@ -35,6 +35,8 @@ var _formFooter = _interopRequireWildcard(require("./form-footer"));
 var _utils = require("./utils");
 var _trackTabViewed = _interopRequireDefault(require("./track-tab-viewed"));
 var _trackMount = _interopRequireDefault(require("./track-mount"));
+var _styled2 = require("./link-search-list/styled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner/spinner"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -93,6 +95,7 @@ function LinkPicker(_ref) {
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
     plugins = _ref.plugins,
+    isLoadingPlugins = _ref.isLoadingPlugins,
     initUrl = _ref.url,
     initDisplayText = _ref.displayText,
     hideDisplayText = _ref.hideDisplayText,
@@ -116,14 +119,14 @@ function LinkPicker(_ref) {
   var queryState = (0, _useSearchQuery.useSearchQuery)(state);
   var _usePlugins = (0, _usePlugins2.usePlugins)(queryState, activeTab, plugins),
     items = _usePlugins.items,
-    isLoading = _usePlugins.isLoading,
+    isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
     activePlugin = _usePlugins.activePlugin,
     tabs = _usePlugins.tabs,
     error = _usePlugins.error,
     retry = _usePlugins.retry,
     pluginAction = _usePlugins.pluginAction;
-  var fixListHeightProps = (0, _useFixHeight.default)(isLoading);
+  var fixListHeightProps = (0, _useFixHeight.default)(isLoadingResults);
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -134,7 +137,7 @@ function LinkPicker(_ref) {
     if (onContentResize) {
       onContentResize();
     }
-  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
+  }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
   var handleChangeUrl = (0, _react.useCallback)(function (e) {
     /** Any on change event is triggered by manual input or paste, so source is null */
     trackAttribute('linkFieldContentInputSource', null);
@@ -346,7 +349,12 @@ function LinkPicker(_ref) {
     "aria-label": intl.formatMessage(_messages.linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
+  }), isLoadingPlugins && !!queryState && (0, _react2.jsx)("div", {
+    css: _styled2.spinnerContainerStyles
+  }, (0, _react2.jsx)(_spinner.default, {
+    testId: testIds.tabsLoadingIndicator,
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && (0, _react2.jsx)(_react.Fragment, null, tabs.length > 0 && (0, _react2.jsx)("div", {
     css: _styled.tabsWrapperStyles
   }, (0, _react2.jsx)(_tabs.default, {
     id: testIds.tabList,
@@ -361,7 +369,7 @@ function LinkPicker(_ref) {
     id: linkSearchListId,
     role: "listbox",
     items: items,
-    isLoading: isLoading,
+    isLoading: isLoadingResults,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
@@ -371,9 +379,11 @@ function LinkPicker(_ref) {
     activePlugin: activePlugin
   }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
     error: error,
-    items: items,
-    state: queryState,
-    isLoading: isLoading,
+    items: items
+    /** If the results section appears to be loading, impact whether the submit button is disabled */,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    queryState: queryState,
+    url: url,
     isEditing: isEditing,
     onCancel: onCancel,
     action: pluginAction,

package/dist/cjs/ui/link-picker/link-search-list/index.js

@@ -48,7 +48,8 @@ var testIds = _objectSpread(_objectSpread({}, _linkSearchNoResults.testIds), {},
   resultListTitle: 'link-picker-list-title',
   searchResultItem: 'link-search-list-item',
   searchResultList: 'link-search-list',
-  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 });
 exports.testIds = testIds;
 var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.24.1",
+	"version": "1.25.0",
 	"sideEffects": false
 }

package/dist/es2019/ui/link-picker/form-footer/index.js

@@ -33,7 +33,8 @@ export const testIds = {
 const FormFooter = ({
   isLoading,
   error,
-  state,
+  url,
+  queryState,
   items,
   isEditing,
   onCancel,
@@ -44,7 +45,7 @@ const FormFooter = ({
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  const isSubmitDisabled = checkSubmitDisabled(isLoading, error, state, items);
+  const isSubmitDisabled = checkSubmitDisabled(isLoading, error, url, queryState, items);
   const insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   return jsx("footer", _extends({
     css: formFooterStyles

package/dist/es2019/ui/link-picker/form-footer/utils.js

@@ -1,10 +1,13 @@
 import { normalizeUrl } from '@atlaskit/linking-common/url';
-export const checkSubmitDisabled = (isLoading, error, state, items) => {
+export const checkSubmitDisabled = (isLoading, error, url, queryState, items) => {
   /*
    * Enable insert when search term is a valid url and it can be normalized
    * Need to explicitly enable it here otherwise next condition could meet
+   *
+   * This should effectively be the validation function for the form, ie if the form
+   * could be submitted, then it should not be disabled
    */
-  if (state && normalizeUrl(state.query)) {
+  if (url && normalizeUrl(url)) {
     return false;
   }
 
@@ -12,7 +15,7 @@ export const checkSubmitDisabled = (isLoading, error, state, items) => {
    * Disable insert button when plugin returns no results,
    * but not if it is a valid url
    */
-  if (state && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+  if (queryState && (items === null || items === void 0 ? void 0 : items.length) === 0) {
     return true;
   }
 

package/dist/es2019/ui/link-picker/index.js

@@ -26,6 +26,8 @@ import FormFooter, { testIds as formFooterTestIds } from './form-footer';
 import { getDataSource, getScreenReaderText, handleNavKeyDown } from './utils';
 import TrackTabViewed from './track-tab-viewed';
 import TrackMount from './track-mount';
+import { spinnerContainerStyles } from './link-search-list/styled';
+import Spinner from '@atlaskit/spinner/spinner';
 export const RECENT_SEARCH_LIST_SIZE = 5;
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
@@ -84,6 +86,7 @@ function LinkPicker({
   onCancel,
   onContentResize,
   plugins,
+  isLoadingPlugins,
   url: initUrl,
   displayText: initDisplayText,
   hideDisplayText,
@@ -110,7 +113,7 @@ function LinkPicker({
   const queryState = useSearchQuery(state);
   const {
     items,
-    isLoading,
+    isLoading: isLoadingResults,
     isActivePlugin,
     activePlugin,
     tabs,
@@ -118,7 +121,7 @@ function LinkPicker({
     retry,
     pluginAction
   } = usePlugins(queryState, activeTab, plugins);
-  const fixListHeightProps = useFixHeight(isLoading);
+  const fixListHeightProps = useFixHeight(isLoadingResults);
   const isEditing = !!initUrl;
   const selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   const isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -130,7 +133,7 @@ function LinkPicker({
     if (onContentResize) {
       onContentResize();
     }
-  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
+  }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
   const handleChangeUrl = useCallback(e => {
     /** Any on change event is triggered by manual input or paste, so source is null */
     trackAttribute('linkFieldContentInputSource', null);
@@ -340,7 +343,12 @@ function LinkPicker({
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
+  }), isLoadingPlugins && !!queryState && jsx("div", {
+    css: spinnerContainerStyles
+  }, jsx(Spinner, {
+    testId: testIds.tabsLoadingIndicator,
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
     css: tabsWrapperStyles
   }, jsx(Tabs, {
     id: testIds.tabList,
@@ -355,7 +363,7 @@ function LinkPicker({
     id: linkSearchListId,
     role: "listbox",
     items: items,
-    isLoading: isLoading,
+    isLoading: isLoadingResults,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
@@ -365,9 +373,11 @@ function LinkPicker({
     activePlugin: activePlugin
   }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     error: error,
-    items: items,
-    state: queryState,
-    isLoading: isLoading,
+    items: items
+    /** If the results section appears to be loading, impact whether the submit button is disabled */,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    queryState: queryState,
+    url: url,
     isEditing: isEditing,
     onCancel: onCancel,
     action: pluginAction,

package/dist/es2019/ui/link-picker/link-search-list/index.js

@@ -34,7 +34,8 @@ export const testIds = {
   resultListTitle: 'link-picker-list-title',
   searchResultItem: 'link-search-list-item',
   searchResultList: 'link-search-list',
-  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 };
 const LinkSearchList = /*#__PURE__*/forwardRef(({
   onChange,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.24.1",
+	"version": "1.25.0",
 	"sideEffects": false
 }

package/dist/esm/ui/link-picker/form-footer/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isLoading", "error", "state", "items", "isEditing", "onCancel", "action"];
+var _excluded = ["isLoading", "error", "url", "queryState", "items", "isEditing", "onCancel", "action"];
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { memo } from 'react';
@@ -35,7 +35,8 @@ export var testIds = {
 var FormFooter = function FormFooter(_ref) {
   var isLoading = _ref.isLoading,
     error = _ref.error,
-    state = _ref.state,
+    url = _ref.url,
+    queryState = _ref.queryState,
     items = _ref.items,
     isEditing = _ref.isEditing,
     onCancel = _ref.onCancel,
@@ -45,7 +46,7 @@ var FormFooter = function FormFooter(_ref) {
   if (error && error instanceof UnauthenticatedError) {
     return null;
   }
-  var isSubmitDisabled = checkSubmitDisabled(isLoading, error, state, items);
+  var isSubmitDisabled = checkSubmitDisabled(isLoading, error, url, queryState, items);
   var insertButtonMsg = isEditing ? messages.saveButton : messages.insertButton;
   return jsx("footer", _extends({
     css: formFooterStyles

package/dist/esm/ui/link-picker/form-footer/utils.js

@@ -1,10 +1,13 @@
 import { normalizeUrl } from '@atlaskit/linking-common/url';
-export var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, state, items) {
+export var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error, url, queryState, items) {
   /*
    * Enable insert when search term is a valid url and it can be normalized
    * Need to explicitly enable it here otherwise next condition could meet
+   *
+   * This should effectively be the validation function for the form, ie if the form
+   * could be submitted, then it should not be disabled
    */
-  if (state && normalizeUrl(state.query)) {
+  if (url && normalizeUrl(url)) {
     return false;
   }
 
@@ -12,7 +15,7 @@ export var checkSubmitDisabled = function checkSubmitDisabled(isLoading, error,
    * Disable insert button when plugin returns no results,
    * but not if it is a valid url
    */
-  if (state && (items === null || items === void 0 ? void 0 : items.length) === 0) {
+  if (queryState && (items === null || items === void 0 ? void 0 : items.length) === 0) {
     return true;
   }
 

package/dist/esm/ui/link-picker/index.js

@@ -30,6 +30,8 @@ import FormFooter, { testIds as formFooterTestIds } from './form-footer';
 import { getDataSource, getScreenReaderText, handleNavKeyDown } from './utils';
 import TrackTabViewed from './track-tab-viewed';
 import TrackMount from './track-mount';
+import { spinnerContainerStyles } from './link-search-list/styled';
+import Spinner from '@atlaskit/spinner/spinner';
 export var RECENT_SEARCH_LIST_SIZE = 5;
 export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
@@ -82,6 +84,7 @@ function LinkPicker(_ref) {
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
     plugins = _ref.plugins,
+    isLoadingPlugins = _ref.isLoadingPlugins,
     initUrl = _ref.url,
     initDisplayText = _ref.displayText,
     hideDisplayText = _ref.hideDisplayText,
@@ -105,14 +108,14 @@ function LinkPicker(_ref) {
   var queryState = useSearchQuery(state);
   var _usePlugins = usePlugins(queryState, activeTab, plugins),
     items = _usePlugins.items,
-    isLoading = _usePlugins.isLoading,
+    isLoadingResults = _usePlugins.isLoading,
     isActivePlugin = _usePlugins.isActivePlugin,
     activePlugin = _usePlugins.activePlugin,
     tabs = _usePlugins.tabs,
     error = _usePlugins.error,
     retry = _usePlugins.retry,
     pluginAction = _usePlugins.pluginAction;
-  var fixListHeightProps = useFixHeight(isLoading);
+  var fixListHeightProps = useFixHeight(isLoadingResults);
   var isEditing = !!initUrl;
   var selectedItem = items === null || items === void 0 ? void 0 : items[selectedIndex];
   var isSelectedItem = (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.url) === url;
@@ -123,7 +126,7 @@ function LinkPicker(_ref) {
     if (onContentResize) {
       onContentResize();
     }
-  }, [onContentResize, items, isLoading, isActivePlugin, tabs]);
+  }, [onContentResize, items, isLoadingResults, isActivePlugin, tabs]);
   var handleChangeUrl = useCallback(function (e) {
     /** Any on change event is triggered by manual input or paste, so source is null */
     trackAttribute('linkFieldContentInputSource', null);
@@ -335,7 +338,12 @@ function LinkPicker(_ref) {
     "aria-label": intl.formatMessage(linkTextMessages.linkTextAriaLabel),
     onClear: handleClear,
     onChange: handleChangeText
-  }), isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
+  }), isLoadingPlugins && !!queryState && jsx("div", {
+    css: spinnerContainerStyles
+  }, jsx(Spinner, {
+    testId: testIds.tabsLoadingIndicator,
+    size: "medium"
+  })), !isLoadingPlugins && isActivePlugin && !!queryState && jsx(Fragment, null, tabs.length > 0 && jsx("div", {
     css: tabsWrapperStyles
   }, jsx(Tabs, {
     id: testIds.tabList,
@@ -350,7 +358,7 @@ function LinkPicker(_ref) {
     id: linkSearchListId,
     role: "listbox",
     items: items,
-    isLoading: isLoading,
+    isLoading: isLoadingResults,
     selectedIndex: selectedIndex,
     activeIndex: activeIndex,
     onSelect: handleSelected,
@@ -360,9 +368,11 @@ function LinkPicker(_ref) {
     activePlugin: activePlugin
   }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     error: error,
-    items: items,
-    state: queryState,
-    isLoading: isLoading,
+    items: items
+    /** If the results section appears to be loading, impact whether the submit button is disabled */,
+    isLoading: isLoadingResults || !!isLoadingPlugins,
+    queryState: queryState,
+    url: url,
     isEditing: isEditing,
     onCancel: onCancel,
     action: pluginAction,

package/dist/esm/ui/link-picker/link-search-list/index.js

@@ -38,7 +38,8 @@ export var testIds = _objectSpread(_objectSpread({}, noResultsTestIds), {}, {
   resultListTitle: 'link-picker-list-title',
   searchResultItem: 'link-search-list-item',
   searchResultList: 'link-search-list',
-  searchResultLoadingIndicator: 'link-picker.results-loading-indicator'
+  searchResultLoadingIndicator: 'link-picker.results-loading-indicator',
+  tabsLoadingIndicator: 'link-picker.tabs-loading-indicator'
 });
 var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onChange = _ref.onChange,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.24.1",
+	"version": "1.25.0",
 	"sideEffects": false
 }

package/dist/types/ui/link-picker/form-footer/index.d.ts

@@ -8,13 +8,15 @@ export declare const testIds: {
     readonly actionButton: "link-picker-action-button";
 };
 interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** If the results section appears to be loading, impact whether the submit button is disabled */
     isLoading: boolean;
     error: unknown | null;
-    state: LinkPickerState | null;
+    url: string;
+    queryState: LinkPickerState | null;
     items: LinkSearchListItemData[] | null;
     isEditing?: boolean;
     onCancel?: () => void;
     action?: LinkPickerPluginAction;
 }
-declare const _default: import("react").MemoExoticComponent<({ isLoading, error, state, items, isEditing, onCancel, action, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+declare const _default: import("react").MemoExoticComponent<({ isLoading, error, url, queryState, items, isEditing, onCancel, action, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export default _default;

package/dist/types/ui/link-picker/form-footer/utils.d.ts

@@ -1,2 +1,2 @@
 import { LinkPickerState, LinkSearchListItemData } from '../../types';
-export declare const checkSubmitDisabled: (isLoading: boolean, error: unknown | null, state: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;
+export declare const checkSubmitDisabled: (isLoading: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;

package/dist/types/ui/link-picker/index.d.ts

@@ -11,6 +11,7 @@ export declare const testIds: {
     readonly searchResultItem: string;
     readonly searchResultList: string;
     readonly searchResultLoadingIndicator: string;
+    readonly tabsLoadingIndicator: string;
     readonly emptyResultPage: string;
     readonly searchError: string;
     readonly insertButton: "link-picker-insert-button";
@@ -58,6 +59,8 @@ export interface LinkPickerProps {
     displayText?: string | null;
     /** Plugins that provide link suggestions / search capabilities. */
     plugins?: LinkPickerPlugin[];
+    /** If set true, Link picker will show the loading spinner where the tabs and results will show. */
+    isLoadingPlugins?: boolean;
     /** Customise the link picker root component */
     component?: React.ComponentType<Partial<LinkPickerProps> & {
         children: React.ReactElement;

package/dist/types/ui/link-picker/link-search-list/index.d.ts

@@ -23,6 +23,7 @@ export declare const testIds: {
     searchResultItem: string;
     searchResultList: string;
     searchResultLoadingIndicator: string;
+    tabsLoadingIndicator: string;
     emptyResultPage: string;
 };
 type LinkSearchListElement = HTMLElement;

package/dist/types-ts4.5/ui/link-picker/form-footer/index.d.ts

@@ -8,13 +8,15 @@ export declare const testIds: {
     readonly actionButton: "link-picker-action-button";
 };
 interface FormFooterProps extends React.HTMLAttributes<HTMLElement> {
+    /** If the results section appears to be loading, impact whether the submit button is disabled */
     isLoading: boolean;
     error: unknown | null;
-    state: LinkPickerState | null;
+    url: string;
+    queryState: LinkPickerState | null;
     items: LinkSearchListItemData[] | null;
     isEditing?: boolean;
     onCancel?: () => void;
     action?: LinkPickerPluginAction;
 }
-declare const _default: import("react").MemoExoticComponent<({ isLoading, error, state, items, isEditing, onCancel, action, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
+declare const _default: import("react").MemoExoticComponent<({ isLoading, error, url, queryState, items, isEditing, onCancel, action, ...restProps }: FormFooterProps) => jsx.JSX.Element | null>;
 export default _default;

package/dist/types-ts4.5/ui/link-picker/form-footer/utils.d.ts

@@ -1,2 +1,2 @@
 import { LinkPickerState, LinkSearchListItemData } from '../../types';
-export declare const checkSubmitDisabled: (isLoading: boolean, error: unknown | null, state: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;
+export declare const checkSubmitDisabled: (isLoading: boolean, error: unknown | null, url: string, queryState: LinkPickerState | null, items: LinkSearchListItemData[] | null) => boolean;

package/dist/types-ts4.5/ui/link-picker/index.d.ts

@@ -11,6 +11,7 @@ export declare const testIds: {
     readonly searchResultItem: string;
     readonly searchResultList: string;
     readonly searchResultLoadingIndicator: string;
+    readonly tabsLoadingIndicator: string;
     readonly emptyResultPage: string;
     readonly searchError: string;
     readonly insertButton: "link-picker-insert-button";
@@ -58,6 +59,8 @@ export interface LinkPickerProps {
     displayText?: string | null;
     /** Plugins that provide link suggestions / search capabilities. */
     plugins?: LinkPickerPlugin[];
+    /** If set true, Link picker will show the loading spinner where the tabs and results will show. */
+    isLoadingPlugins?: boolean;
     /** Customise the link picker root component */
     component?: React.ComponentType<Partial<LinkPickerProps> & {
         children: React.ReactElement;

package/dist/types-ts4.5/ui/link-picker/link-search-list/index.d.ts

@@ -23,6 +23,7 @@ export declare const testIds: {
     searchResultItem: string;
     searchResultList: string;
     searchResultLoadingIndicator: string;
+    tabsLoadingIndicator: string;
     emptyResultPage: string;
 };
 type LinkSearchListElement = HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -90,7 +90,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "*",
     "@atlassian/link-picker-atlassian-plugin": "^33.3.0",
-    "@atlassian/link-picker-plugins": "^22.3.0",
+    "@atlassian/link-picker-plugins": "^23.0.0",
     "@atlassian/recent-work-client": "^1.8.0",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.5",

package/report.api.md

@@ -75,6 +75,7 @@ export interface LinkPickerProps {
   // (undocumented)
   featureFlags?: Record<string, unknown>;
   hideDisplayText?: boolean;
+  isLoadingPlugins?: boolean;
   onCancel: () => void;
   onContentResize?: () => void;
   onSubmit: (

package/tmp/api-report-tmp.d.ts

@@ -55,6 +55,7 @@ export interface LinkPickerProps {
     // (undocumented)
     featureFlags?: Record<string, unknown>;
     hideDisplayText?: boolean;
+    isLoadingPlugins?: boolean;
     onCancel: () => void;
     onContentResize?: () => void;
     onSubmit: (arg: OnSubmitParameter, analytic?: UIAnalyticsEvent | null) => void;