Add UI feedback

scripts/apps/highlights/directives/HighlightsReactDropdown.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import HighlightBtn from '../components/HighlightBtn';
+import {Loader, Spinner} from 'superdesk-ui-framework/react';
 
 /**
  * @ngdoc directive

scripts/apps/highlights/services/HighlightsService.ts

@@ -2,6 +2,8 @@
 import {gettext} from 'core/utils';
 import {IPackagesService} from 'types/Services/Packages';
 import {IBaseRestApiResponse} from 'superdesk-api';
+import {notify} from 'core/notify/notify';
+import {trackArticleActionProgress} from 'core/helpers/network';
 
 export interface IHighlight extends IBaseRestApiResponse {
     name: string;
@@ -54,11 +56,13 @@
         var criteria = {};
 
         if (desk) {
-            criteria = {where: {$or: [
-                {desks: desk},
-                {desks: {$size: 0}},
-            ],
-            },
+            criteria = {
+                where: {
+                    $or: [
+                        {desks: desk},
+                        {desks: {$size: 0}},
+                    ],
+                },
             };
         }
 
@@ -111,8 +115,16 @@
      * Mark an item for a highlight
      */
     service.markItem = function(highlight, markedItem) {
-        return api.save('marked_for_highlights', {highlights: [highlight], marked_item: markedItem._id});
-    };
+        return trackArticleActionProgress(
+            () => api.save(
+                'marked_for_highlights',
+                {highlights: [highlight], marked_item: markedItem._id},
+            ),
+            markedItem._id,
+            gettext('Item marked'),
+            gettext('Couldn\'t mark item'),
+        );
+    }
 
     /**
      * Create empty highlight package

scripts/apps/search/components/Item.tsx

@@ -111,6 +111,7 @@ export class Item extends React.Component<IProps, IState> {
         this.onDragStart = this.onDragStart.bind(this);
         this.openAuthoringView = this.openAuthoringView.bind(this);
         this.toggleNested = this.toggleNested.bind(this);
+        this.handleActionLoading = this.handleActionLoading.bind(this);
     }
 
     componentWillMount() {
@@ -119,13 +120,21 @@ export class Item extends React.Component<IProps, IState> {
         }
     }
 
+    handleActionLoading(e: CustomEvent) {
+        if (e.detail.itemId === this.props.item._id) {
+            this.setState({loading: e.detail.loading});
+        }
+    }
+
     componentDidMount() {
+        addEventListener('action-loading', this.handleActionLoading);
         this._mounted = true;
     }
 
     componentWillUnmount() {
         this._mounted = false;
         closeActionsMenu(this.props.item._id);
+        removeEventListener('action-loading', this.handleActionLoading);
     }
 
     componentWillReceiveProps(nextProps) {
@@ -358,6 +367,7 @@ export class Item extends React.Component<IProps, IState> {
             default:
                 return (
                     <ListItemTemplate
+                        loading={this.state.loading}
                         item={item}
                         relatedEntities={this.props.relatedEntities}
                         itemSelected={itemSelected}

scripts/apps/search/components/ItemListTemplate.tsx

@@ -9,6 +9,7 @@ interface IPropsItemsListTemplate extends IPropsItemListInfo {
     selectingDisabled: boolean;
     getActionsMenu: () => any;
     multiSelect: IMultiSelectNew | ILegacyMultiSelect;
+    loading?: boolean;
 }
 
 export class ListItemTemplate extends React.Component<IPropsItemsListTemplate> {
@@ -29,6 +30,7 @@ export class ListItemTemplate extends React.Component<IPropsItemsListTemplate> {
                         : null
                 }
                 <ListItemInfo
+                    loading={this.props.loading}
                     item={item}
                     relatedEntities={this.props.relatedEntities}
                     openAuthoringView={this.props.openAuthoringView}

scripts/apps/search/components/ListItemInfo.tsx

@@ -6,6 +6,7 @@ import {flatMap} from 'lodash';
 import {extensions} from 'appConfig';
 import {IDesk, IArticle, IListViewFieldWithOptions} from 'superdesk-api';
 import {IRelatedEntities} from 'core/getRelatedEntities';
+import {Loader} from 'superdesk-ui-framework/react';
 
 export interface IPropsItemListInfo {
     item: IArticle;
@@ -14,6 +15,7 @@ export interface IPropsItemListInfo {
     ingestProvider: any;
     profilesById: any;
     highlightsById: any;
+    loading?: boolean;
     markedDesksById: any;
     openAuthoringView: (rewrittenBy?: string) => void;
     narrow: any;
@@ -69,6 +71,7 @@ export class ListItemInfo extends React.PureComponent<IPropsItemListInfo> {
                 className={className}
                 style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}
             >
+                {this.props.loading && <Loader overlay />}
                 {listItems}
                 {
                     articleDisplayWidgets.length < 1 ? null : (

scripts/core/helpers/network.tsx

@@ -1,5 +1,6 @@
 import ng from 'core/services/ng';
 import {appConfig} from '../../appConfig';
+import {notify} from 'core/notify/notify';
 
 interface IHttpRequestOptions {
     method: 'GET' | 'POST' | 'PATCH' | 'PUT' | 'DELETE';
@@ -173,3 +174,30 @@ export function uploadFileWithProgress<T>(
             });
         });
 }
+
+export function trackArticleActionProgress<T>(
+    p: () => Promise<T>,
+    itemId: string,
+    successMessage: string,
+    errorMessage: string,
+): Promise<T> {
+    dispatchEvent(new CustomEvent('action-loading', {
+        detail: {loading: true, itemId},
+    }));
+
+    return p()
+        .then((res) => {
+            notify.success(successMessage);
+
+            return res;
+        }).catch((error) => {
+            notify.error(errorMessage);
+
+            return error;
+        })
+        .finally(() => {
+            dispatchEvent(new CustomEvent('action-loading', {
+                detail: {loading: true, itemId},
+            }));
+        });
+}