From ad422e873a57569067f503781d79d9caf16d76f7 Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Wed, 8 Jan 2025 16:36:05 +0100
Subject: [PATCH] feat: add keyboard shortcut for saving experiments and update
 save button icon to show loading state

---
 .../src/components/ExperimentForm.tsx          | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/backend/experiment/templates/form/experiment-form/src/components/ExperimentForm.tsx b/backend/experiment/templates/form/experiment-form/src/components/ExperimentForm.tsx
index 2bdc86baf..9bc909a2e 100644
--- a/backend/experiment/templates/form/experiment-form/src/components/ExperimentForm.tsx
+++ b/backend/experiment/templates/form/experiment-form/src/components/ExperimentForm.tsx
@@ -3,7 +3,7 @@ import { createExperimentEntityUrl } from '../config';
 import { useNavigate, useParams, Routes, Route, useLocation } from 'react-router-dom';
 import Page from './Page';
 import { TranslatedContentForms } from './TranslatedContentForms';
-import { FiSave, FiArrowLeft, FiGlobe, FiLayers } from 'react-icons/fi';
+import { FiSave, FiArrowLeft, FiGlobe, FiLayers, FiLoader } from 'react-icons/fi';
 import { Button } from './Button';
 import { Tabs } from './Tabs';
 import { FormField } from './form/FormField';
@@ -73,6 +73,20 @@ const ExperimentForm: React.FC<ExperimentFormProps> = () => {
     }
   }, [location]);
 
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+        event.preventDefault();
+        handleSubmit(event as unknown as React.FormEvent);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [experiment]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, type, checked, value } = e.target;
     patchExperiment({
@@ -236,7 +250,7 @@ const ExperimentForm: React.FC<ExperimentFormProps> = () => {
           type="submit"
           disabled={saveLoading}
           variant="success"
-          icon={<FiSave />}
+          icon={!saveLoading ? <FiSave /> : <div className="animate-spin"><FiLoader /></div>}
           className="mt-5"
         >
           {saveLoading ? 'Saving...' : (experimentId ? 'Update Experiment' : 'Create Experiment')}