From cf7ebc488db33725444c428b4244d780ab9d123b Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Tue, 2 Feb 2021 07:50:48 +0000
Subject: [PATCH] fix(frontend): use consistent spinner style on TitleCard/Plex
 Presets

---
 src/components/Settings/SettingsPlex.tsx | 31 +++++++++++++-----------
 src/components/TitleCard/index.tsx       | 15 +-----------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/src/components/Settings/SettingsPlex.tsx b/src/components/Settings/SettingsPlex.tsx
index 57234ec96..f4afea7ac 100644
--- a/src/components/Settings/SettingsPlex.tsx
+++ b/src/components/Settings/SettingsPlex.tsx
@@ -12,6 +12,7 @@ import Badge from '../Common/Badge';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import Alert from '../Common/Alert';
+import Spinner from '../../assets/spinner.svg';
 
 const messages = defineMessages({
   plexsettings: 'Plex Settings',
@@ -437,20 +438,22 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       }}
                       className="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 rounded-r-md hover:bg-indigo-500 focus:outline-none focus:ring-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700"
                     >
-                      <svg
-                        className={`w-5 h-5 ${
-                          isRefreshingPresets ? 'animate-spin' : ''
-                        }`}
-                        fill="currentColor"
-                        viewBox="0 0 20 20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
+                      {isRefreshingPresets ? (
+                        <Spinner className="w-5 h-5" />
+                      ) : (
+                        <svg
+                          className="w-5 h-5"
+                          fill="currentColor"
+                          viewBox="0 0 20 20"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      )}
                     </button>
                   </div>
                 </div>
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 0ced3001b..17f1fa185 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -179,20 +179,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
             leaveTo="opacity-0"
           >
             <div className="absolute top-0 bottom-0 left-0 right-0 z-40 flex items-center justify-center text-white bg-gray-800 bg-opacity-75 rounded-lg">
-              <svg
-                className="w-10 h-10 animate-spin"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-                />
-              </svg>
+              <Spinner className="w-10 h-10" />
             </div>
           </Transition>