diff --git a/assets/css/_card-modal.scss b/assets/css/_card-modal.scss
index 828b8ddaa..99b021346 100644
--- a/assets/css/_card-modal.scss
+++ b/assets/css/_card-modal.scss
@@ -186,6 +186,22 @@
           gap: 0.5rem;
         }
 
+        .spinning {
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          60% {
+            transform: rotate(360deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+
         a {
           display: inline-flex;
           cursor: pointer;
diff --git a/assets/js/components/respondents/RespondentIndex.jsx b/assets/js/components/respondents/RespondentIndex.jsx
index d5e63a705..44afc97d8 100644
--- a/assets/js/components/respondents/RespondentIndex.jsx
+++ b/assets/js/components/respondents/RespondentIndex.jsx
@@ -502,7 +502,7 @@ class RespondentIndex extends Component<Props, State> {
       const createdAtLabel = fileExists ? <TimeAgo date={(fileStatus?.created_at || 0) * 1000} formatter={this.timeFormatter} /> : null
 
       const fileCreating = !!fileStatus?.creating
-      const generateButtonClass = fileCreating ? "grey-text" : "black-text"
+      const generateButtonClass = fileCreating ? "grey-text spinning" : "black-text"
       const generateButtonOnClick = fileCreating ? null : item.onGenerate
       const generatingFileLabel = fileCreating ? "Generating..." : ""
 
diff --git a/assets/js/reducers/respondentsFiles.js b/assets/js/reducers/respondentsFiles.js
index 96b444020..7949b879d 100644
--- a/assets/js/reducers/respondentsFiles.js
+++ b/assets/js/reducers/respondentsFiles.js
@@ -1,7 +1,22 @@
 import * as actions from "../actions/survey"
 
+const markAsCreating = (files, creatingFile) => ({
+  ...files,
+  [creatingFile]: {
+    ...files[creatingFile],
+    file_type: creatingFile,
+    creating: true,
+    created_at: null,
+  }
+})
+
 export default (state = {}, action) => {
   switch (action.type) {
+    case actions.GENERATING_FILE:
+      return {
+        ...state,
+        files: markAsCreating(state.files || {}, action.file),
+      }
     case actions.FETCHING_FILES_STATUS:
       if (action.surveyId != state.surveyId) {
         return {