update loader styling

public/css/loader.css

@@ -13,7 +13,13 @@
     width: 100svw;
     height: 100svh;
     background-color: var(--SmartThemeBlurTintColor);
-    color: val(--SmartThemeBodyColor);
-    opacity: 0.7;
-    transition: 500ms;
+    /*for some reason the full screen blur does not work on iOS*/
+    backdrop-filter: blur(30px);
+    color: var(--SmartThemeBodyColor);
+    opacity: 1;
 }
+
+#load-spinner {
+    transition: all 300ms ease-out;
+    opacity: 1;
+}

public/scripts/loader.js

@@ -2,11 +2,27 @@ const ELEMENT_ID = 'loader';
 
 export function showLoader() {
     const container = $('<div></div>').attr('id', ELEMENT_ID);
-    const loader = $('<div></div>').addClass('fa-solid fa-spinner fa-spin fa-3x');
+    const loader = $('<div></div>').attr('id', 'load-spinner').addClass('fa-solid fa-gear fa-spin fa-3x')
     container.append(loader);
     $('body').append(container);
+
 }
 
 export function hideLoader() {
-    $(`#${ELEMENT_ID}`).remove();
-}
+    //Sets up a 2-step animation. Spinner blurs/fades out, and then the loader shadow does the same.
+    $(`#load-spinner`).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function () {
+        //console.log('FADING BLUR SCREEN')
+        $(`#${ELEMENT_ID}`)
+            .animate({ opacity: 0 }, 300, function () {
+                //console.log('REMOVING LOADER')
+                $(`#${ELEMENT_ID}`).remove()
+            })
+    })
+
+    //console.log('BLURRING SPINNER')
+    $(`#load-spinner`)
+        .css({
+            'filter': 'blur(15px)',
+            'opacity': '0',
+        })
+}