@@ -169,11 +169,6 @@ Item {
169169 left: parent.left
170170 leftMargin: units.gu(0.5)
171171 }
172−
173− running: scope.searchInProgress && searchField.text !== ""
174− opacity: running ? 1 : 0
175−
176− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing.type: Easing.Linear } }
177172 }
178173
179174 Image {
@@ -187,9 +182,6 @@ Item {
187182 width: units.gu(3)
188183 height: units.gu(3)
189184 visible: opacity > 0
190− opacity: searchIndicator.running ? 0 : 1
191−
192− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration; easing.type: Easing.Linear } }
193185 }
194186
195187 Item {
@@ -208,6 +200,35 @@ Item {
208200 onActiveFocusChanged: {
209201 if (!activeFocus) searchContainer.closePopover()
210202 }
203+
204+ states: [
205+ State {
206+ name: "searching"
207+ when: scope.searchInProgress && searchField.text !== ""
208+ PropertyChanges { target: searchIndicator; running: true; opacity: 1 }
209+ PropertyChanges { target: primaryImage; opacity: 0 }
210+ }, State {
211+ name: "idle"
212+ PropertyChanges { target: searchIndicator; running: true; opacity: 1 }
213+ PropertyChanges { target: primaryImage; opacity: 0 }
214+ }
215+ ]
216+
217+ transitions: [
218+ Transition {
219+ to: "searching"
220+ SequentialAnimation {
221+ NumberAnimation { targets: primaryImage; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
222+ NumberAnimation { targets: searchIndicator; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
223+ }
224+ }, Transition {
225+ to: "idle"
226+ SequentialAnimation {
227+ NumberAnimation { targets: searchIndicator; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
228+ NumberAnimation { targets: primaryImage; property: opacity; duration: UbuntuAnimation.SlowDuration; easing.type: Easing.Linear }
229+ }
230+ }
231+ ]
211232 }
212233
213234 states: [