diff --git a/packages/fiori/src/ShellBarSearch.ts b/packages/fiori/src/ShellBarSearch.ts
index 743a1e2ab678..be47a266ef1d 100644
--- a/packages/fiori/src/ShellBarSearch.ts
+++ b/packages/fiori/src/ShellBarSearch.ts
@@ -4,6 +4,7 @@ import Search from "./Search.js";
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
import ShellBarSearchTemplate from "./ShellBarSearchTemplate.js";
import ShellBarSearchCss from "./generated/themes/ShellBarSearch.css.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
import {
SEARCH_FIELD_SEARCH_ICON,
@@ -27,6 +28,9 @@ import {
Search.styles,
ShellBarSearchCss,
],
+ dependencies: [
+ BusyIndicator,
+ ],
})
class ShellBarSearch extends Search {
@@ -38,6 +42,14 @@ class ShellBarSearch extends Search {
@property({ type: Boolean })
autoOpen = false;
+ /**
+ * Indicates whether the search field is in busy state.
+ * @default false
+ * @public
+ */
+ @property({ type: Boolean })
+ busy = false;
+
_handleSearchIconPress() {
super._handleSearchIconPress();
diff --git a/packages/fiori/src/ShellBarSearchTemplate.tsx b/packages/fiori/src/ShellBarSearchTemplate.tsx
index ef5cef85316b..b376f3396199 100644
--- a/packages/fiori/src/ShellBarSearchTemplate.tsx
+++ b/packages/fiori/src/ShellBarSearchTemplate.tsx
@@ -1,11 +1,14 @@
import SearchFieldTemplate from "./SearchFieldTemplate.js";
import type ShellBarSearch from "./ShellBarSearch.js";
import ShellBarSearchPopoverTemplate from "./ShellBarSearchPopoverTemplate.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
export default function ShellBarSearchTemplate(this: ShellBarSearch) {
return (
<>
- { SearchFieldTemplate.call(this) }
+
This demo shows ShellBarSearch with internal BusyIndicator wrapping using the busy property.
ShellBarSearch outside of ShellBar for easier testing.
+ +