From a3c01c0b2abb34c112e697c14787d86e2be761cb Mon Sep 17 00:00:00 2001
From: Julian Skinner <ju-Skinner@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:53:02 -0500
Subject: [PATCH] feature(loader): change loader to new behavior and colors
 (#1975)

* feat(loader-rails): change the loader animation and fill color

* feat(loader-react): change the loader animation and fill color

* style(loader): change timing to 1.5s per convo with design team

---------

Co-authored-by: Julian Skinner <dev+github-bot@kajabi.com>
---
 .../sage_components/_sage_loader.html.erb     | 21 ++++++-
 .../lib/stylesheets/components/_loader.scss   | 40 ++++++-------
 packages/sage-react/lib/Loader/Loader.jsx     | 58 ++++++++++++-------
 3 files changed, 74 insertions(+), 45 deletions(-)

diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
index 91cd1973cc..111436cb76 100644
--- a/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
+++ b/docs/lib/sage_rails/app/views/sage_components/_sage_loader.html.erb
@@ -1,5 +1,6 @@
 <%
   component_description = component.type === "success" ? "Success" : "Loading..."
+  stroke_color = SageTokens::COLOR_PALETTE[:MERCURY_40]
 %>
 
 <div class="
@@ -12,11 +13,25 @@
   aria-busy="true"
   aria-live="polite"
   <%= component.generated_html_attributes.html_safe %>
-> 
+>
   <%# Spinner SVG %>
   <% if component.type === "spinner" %>
-    <svg class="sage-loader__spinner" viewBox="25 25 50 50">
-      <circle class="sage-loader__spinner-path" cx="50" cy="50" r="20" fill="none" stroke="0072EF" stroke-width="2" />
+    <svg class="sage-loader__spinner" viewBox="0 0 200 200" fill="none" color="<%=stroke_color%>">
+      <defs>
+        <linearGradient id="sage-loader__spinner-secondHalf">
+          <stop offset="0%" stop-opacity="0" stop-color="currentColor" />
+          <stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+        <linearGradient id="sage-loader__spinner-firstHalf">
+          <stop offset="0%" stop-opacity="1" stop-color="currentColor" />
+          <stop offset="100%" stop-opacity="0.5" stop-color="currentColor" />
+        </linearGradient>
+      </defs>
+      <g>
+        <path class="sage-loader__spinner-path sage-loader__spinner-secondHalf" d="M 4 100 A 96 96 0 0 1 196 100" />
+        <path class="sage-loader__spinner-path sage-loader__spinner-firstHalf" d="M 196 100 A 96 96 0 0 1 4 100" />
+        <path class="sage-loader__spinner-path sage-loader__spinner-highlight" d="M 4 100 A 96 96 0 0 1 4 98" />
+      </g>
     </svg>
   <% end %>
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_loader.scss b/packages/sage-assets/lib/stylesheets/components/_loader.scss
index 014e30b0ca..1ae92a2902 100644
--- a/packages/sage-assets/lib/stylesheets/components/_loader.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_loader.scss
@@ -10,8 +10,7 @@ $-loader-bar-speed: 1.2s;
 $-loader-bar-speed-delay: 0.5s;
 $-loader-bar-width: rem(300px);
 $-loader-spinner-size: rem(48px);
-$-loader-spinner-speed: 2s;
-$-loader-spinner-path-speed: 1.5s;
+$-loader-spinner-speed: 1.5s;
 $-loader-typing-size: rem(6px);
 $-loader-lower-opacity: 0.4;
 
@@ -84,7 +83,7 @@ $-loader-lower-opacity: 0.4;
 .sage-loader__spinner {
   width: sage-spacing(xl);
   height: sage-spacing(xl);
-  animation: rotate $-loader-spinner-speed linear infinite;
+  animation: loader-rotate $-loader-spinner-speed linear infinite;
 }
 
 .sage-loader__spinner--loading-button {
@@ -94,11 +93,20 @@ $-loader-lower-opacity: 0.4;
 }
 
 .sage-loader__spinner-path {
-  stroke-dasharray: 150, 200;
-  stroke-dashoffset: -10;
+  stroke-width: 8px;
+}
+
+.sage-loader__spinner-secondHalf {
+  stroke: url("#sage-loader__spinner-secondHalf");
+}
+
+.sage-loader__spinner-firstHalf {
+  stroke: url("#sage-loader__spinner-firstHalf");
+}
+
+.sage-loader__spinner-highlight {
+  stroke: currentColor;
   stroke-linecap: round;
-  stroke: sage-color(primary, 300);
-  animation: dash $-loader-spinner-path-speed ease-in-out infinite;
 }
 
 .sage-loader__spinner-path--loading-button {
@@ -146,24 +154,12 @@ $-loader-lower-opacity: 0.4;
   }
 }
 
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes dash {
+@keyframes loader-rotate {
   0% {
-    stroke-dasharray: 1, 200;
-    stroke-dashoffset: 0;
-  }
-  50% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -35;
+    transform: rotate(0deg);
   }
   100% {
-    stroke-dasharray: 89, 200;
-    stroke-dashoffset: -124;
+    transform: rotate(360deg);
   }
 }
 
diff --git a/packages/sage-react/lib/Loader/Loader.jsx b/packages/sage-react/lib/Loader/Loader.jsx
index 115193c292..27f6a89d50 100644
--- a/packages/sage-react/lib/Loader/Loader.jsx
+++ b/packages/sage-react/lib/Loader/Loader.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { LOADER_TYPES } from './configs';
+import { SageTokens } from '../configs';
 
 export const Loader = ({
   fillSpace,
@@ -33,34 +34,51 @@ export const Loader = ({
       {(type === LOADER_TYPES.SPINNER_IN_BUTTON) && (
         <svg
           className="sage-loader__spinner sage-loader__spinner--loading-button"
-          viewBox="25 25 50 50"
+          viewBox="0 0 200 200"
+          fill="none"
+          color={SageTokens.COLOR_PALETTE.MERCURY_40}
           aria-hidden="true"
         >
-          <circle
-            className="sage-loader__spinner-path sage-loader__spinner-path--loading-button"
-            cx="50"
-            cy="50"
-            r="20"
-            fill="none"
-            stroke="0072EF"
-            strokeWidth="4"
-          />
+          <defs>
+            <linearGradient id="sage-loader__spinner-secondHalf">
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id="sage-loader__spinner-firstHalf">
+              <stop offset="0%" stopOpacity="1" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g>
+            <path className="sage-loader__spinner-path sage-loader__spinner--loading-button sage-loader__spinner-secondHalf" d="M 4 100 A 96 96 0 0 1 196 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner--loading-button sage-loader__spinner-firstHalf" d="M 196 100 A 96 96 0 0 1 4 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner--loading-button sage-loader__spinner-highlight" d="M 4 100 A 96 96 0 0 1 4 98" />
+          </g>
         </svg>
       )}
       {(type === LOADER_TYPES.SPINNER) && (
         <svg
           className="sage-loader__spinner"
-          viewBox="25 25 50 50"
+          viewBox="0 0 200 200"
+          fill="none"
+          color={SageTokens.COLOR_PALETTE.MERCURY_40}
+          aria-hidden="true"
         >
-          <circle
-            className="sage-loader__spinner-path"
-            cx="50"
-            cy="50"
-            r="20"
-            fill="none"
-            stroke="0072EF"
-            strokeWidth="2"
-          />
+          <defs>
+            <linearGradient id="sage-loader__spinner-secondHalf">
+              <stop offset="0%" stopOpacity="0" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+            <linearGradient id="sage-loader__spinner-firstHalf">
+              <stop offset="0%" stopOpacity="1" stopColor="currentColor" />
+              <stop offset="100%" stopOpacity="0.5" stopColor="currentColor" />
+            </linearGradient>
+          </defs>
+          <g>
+            <path className="sage-loader__spinner-path sage-loader__spinner-secondHalf" d="M 4 100 A 96 96 0 0 1 196 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner-firstHalf" d="M 196 100 A 96 96 0 0 1 4 100" />
+            <path className="sage-loader__spinner-path sage-loader__spinner-highlight" d="M 4 100 A 96 96 0 0 1 4 98" />
+          </g>
         </svg>
       )}
       {(type === LOADER_TYPES.SUCCESS) && (