diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
index ae8bd772d2..9907074f66 100644
--- a/ui/src/app/applications/components/applications-list/applications-list.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -19,7 +19,8 @@ import { ApplicationTiles } from './applications-tiles';
 
 require('./applications-list.scss');
 
-const APP_FIELDS = ['metadata.name', 'metadata.resourceVersion', 'metadata.creationTimestamp', 'spec', 'status.sync.status', 'status.health', 'status.summary'];
+const APP_FIELDS = [
+    'metadata.name', 'metadata.annotations', 'metadata.resourceVersion', 'metadata.creationTimestamp', 'spec', 'status.sync.status', 'status.health', 'status.summary'];
 const APP_LIST_FIELDS = APP_FIELDS.map((field) => `items.${field}`);
 const APP_WATCH_FIELDS = ['result.type', ...APP_FIELDS.map((field) => `result.application.${field}`)];
 
diff --git a/ui/src/app/applications/components/applications-list/applications-tiles.tsx b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
index d9eeb0656d..a3930c24de 100644
--- a/ui/src/app/applications/components/applications-list/applications-tiles.tsx
+++ b/ui/src/app/applications/components/applications-list/applications-tiles.tsx
@@ -1,4 +1,5 @@
 import { Tooltip } from 'argo-ui';
+import * as classNames from 'classnames';
 import * as React from 'react';
 
 import { Consumer } from '../../../shared/context';
@@ -78,11 +79,12 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
                                             syncApplication(app.metadata.name);
                                         }}><i className='fa fa-sync'/> Sync</a>
                                     &nbsp;
-                                    <a className='argo-button argo-button--base'
+                                    <a className='argo-button argo-button--base' {...AppUtils.refreshLinkAttrs(app)}
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            refreshApplication(app.metadata.name);
-                                       }}><i className='fa fa-redo'/> Refresh</a>
+                                       }}><i className={classNames('fa fa-redo', { 'status-icon--spin': AppUtils.isAppRefreshing(app) })}/> <span className='show-for-xlarge'>
+                                           Refresh</span></a>
                                     &nbsp;
                                     <a className='argo-button argo-button--base' onClick={(e) => {
                                         e.stopPropagation();
diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
index f6162feeb2..0947a6eb90 100644
--- a/ui/src/app/applications/components/utils.tsx
+++ b/ui/src/app/applications/components/utils.tsx
@@ -350,3 +350,11 @@ export function getAppOverridesCount(app: appModels.Application) {
     }
     return 0;
 }
+
+export function isAppRefreshing(app: appModels.Application) {
+    return !!(app.metadata.annotations && app.metadata.annotations[appModels.AnnotationRefreshKey]);
+}
+
+export function refreshLinkAttrs(app: appModels.Application) {
+    return { disabled: isAppRefreshing(app) };
+}