Add fade-in animation on `Spinner` during annotation-saving

Fade the Spinner in slowly on annotation-save such that it only appears
if saving the annotation is taking a while. This reduces visual clutter
when the annotation saves quickly.

src/sidebar/components/Annotation/Annotation.js

@@ -29,7 +29,15 @@ function SavingMessage() {
       )}
       data-testid="saving-message"
     >
-      <Spinner classes="text-xl" size="small" />
+      <Spinner
+        classes={classnames(
+          'text-xl',
+          // Slowly fade in the Spinner such that it only shows up if
+          // the saving is slow
+          'animate-fade-in-slow'
+        )}
+        size="small"
+      />
       <div className="text-color-text-light font-medium">Saving...</div>
     </div>
   );

tailwind.config.mjs

@@ -16,6 +16,7 @@ export default {
       animation: {
         adderPopUp: 'adderPopUp 0.08s ease-in forwards',
         adderPopDown: 'adderPopDown 0.08s ease-in forwards',
+        'fade-in-slow': 'fade-in 1s ease-in',
       },
       borderRadius: {
         // Tailwind provides a default set of border-radius utility styles
@@ -112,6 +113,14 @@ export default {
             transform: 'scale(1) translateY(0px)',
           },
         },
+        'fade-in': {
+          '0%': {
+            opacity: '0',
+          },
+          '100%': {
+            opacity: '1',
+          },
+        },
       },
       screens: {
         touch: { raw: '(pointer: coarse)' },