From 92dbf2e079280426817404679acc3db0163087e7 Mon Sep 17 00:00:00 2001
From: arunshenoy99 <devarunshenoy99@gmail.com>
Date: Wed, 25 Jan 2023 17:09:40 +0530
Subject: [PATCH] animate site features

---
 .../CheckboxListSkeleton/index.js             | 56 ++++++++++---------
 .../CheckboxListSkeleton/stylesheet.scss      | 22 +++++---
 .../Drawer/DrawerPanel/DesignColors.js        |  8 ++-
 .../components/Drawer/stylesheet.scss         |  4 --
 4 files changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
index 37b9255fc..72e43a813 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/index.js
@@ -1,38 +1,44 @@
+import Animate from '../../Animate';
 
 /**
  * Checkbox List Skeleton Component
  * This returns a List of Checkbox Items Skeletons to imitate loading
  *
- * @param          customItemsList.count
+ * @param  customItemsList.count
+ * @param  customItemsList.count.count
  * @return CheckboxList
  */
-const CheckboxListSkeleton = ({ count }) => {
+const CheckboxListSkeleton = ( { count } ) => {
+	const buildCheckboxSkeletonItems = () => {
+		const customItems = [];
 
-    const buildCheckboxSkeletonItems = () => {
-        var customItems = [];
+		for ( let idx = 0; idx < count; idx++ )
+			customItems.push(
+				<Animate
+					type={ 'shine-placeholder' }
+					className="checkbox-skeleton-item"
+				/>
+			);
 
-        for (let idx = 0; idx < count; idx++) 
-            customItems.push(  <div className="checkbox-skeleton-item shimmer"/>);
-        
-        return customItems;
-    };
+		return customItems;
+	};
 
-    return (
-        <div className="checkbox-list">
-            <div className="checkbox-list-col">
-                {buildCheckboxSkeletonItems().slice(
-                    0,
-                    Math.floor(count / 2)
-                )}
-            </div>
-            <div className="checkbox-list-col">
-                {buildCheckboxSkeletonItems().slice(
-                    Math.floor(count / 2),
-                    count
-                )}
-            </div>
-        </div>
-    );
+	return (
+		<div className="checkbox-list">
+			<div className="checkbox-list-col">
+				{ buildCheckboxSkeletonItems().slice(
+					0,
+					Math.floor( count / 2 )
+				) }
+			</div>
+			<div className="checkbox-list-col">
+				{ buildCheckboxSkeletonItems().slice(
+					Math.floor( count / 2 ),
+					count
+				) }
+			</div>
+		</div>
+	);
 };
 
 export default CheckboxListSkeleton;
diff --git a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
index 89de99623..46837e114 100644
--- a/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
+++ b/src/OnboardingSPA/components/CheckboxTemplate/CheckboxListSkeleton/stylesheet.scss
@@ -1,15 +1,19 @@
 /*COLOR VARIABLES*/
 $white-offset: rgb(224, 224, 224);
 $main-color-light: var(--nfd-onboarding-white);
+$grey-color: #f6f7f8;
 
 .checkbox-skeleton-item {
-    height: 45px;
-    margin: 12px;
-    padding: 16px;
-    margin-top: 16px;
-    background: $main-color-light;
-    border: 0.5px solid $white-offset;
-    cursor: not-allowed;
-    width: clamp(15rem, 25vw, 35rem);
-    box-shadow: 0px 2px 8px 2px rgba(204, 204, 204, 0.175295);
+	height: 45px;
+	margin: 12px;
+	padding: 16px;
+	margin-top: 16px;
+	border: 0.5px solid $white-offset;
+	cursor: not-allowed;
+	width: clamp(15rem, 25vw, 35rem);
+	box-shadow: 0 2px 8px 2px rgba(204, 204, 204, 0.175295);
+	background: $grey-color;
+	background-repeat: no-repeat;
+	background-image:
+ linear-gradient(to right, $grey-color 0%, $main-color-grey 20%, $grey-color 40%, $grey-color 100%);
 }
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
index c311759ff..ecc6d11ba 100644
--- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
+++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js
@@ -7,6 +7,7 @@ import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
 import { GlobalStylesProvider } from '../../LivePreview';
+import Animate from '../../Animate';
 
 const DesignColors = () => {
 	const [ isLoaded, setIsLoaded ] = useState( false );
@@ -346,7 +347,10 @@ const DesignColors = () => {
 						<div className="custom-palette__top-icon">-</div>
 					) }
 				</div>
-				<div
+				<Animate
+					type={ 'fade-in' }
+					duration="300ms"
+					timingFunction="ease-in-out"
 					className={ `custom-palette__below ${
 						isAccordionClosed
 							? 'custom-palette_acc_closed'
@@ -431,7 +435,7 @@ const DesignColors = () => {
 							Tertiary
 						</div>
 					</div>
-				</div>
+				</Animate>
 				{ showColorPicker && (
 					<Popover>
 						<div
diff --git a/src/OnboardingSPA/components/Drawer/stylesheet.scss b/src/OnboardingSPA/components/Drawer/stylesheet.scss
index d896837a3..9802393c3 100644
--- a/src/OnboardingSPA/components/Drawer/stylesheet.scss
+++ b/src/OnboardingSPA/components/Drawer/stylesheet.scss
@@ -453,10 +453,6 @@ $main-border-main--rgb: var(--nfd-onboarding-highlighted--rgb);
 
 	&__below {
 		margin-top: 16px;
-		animation-name: fadeIn;
-		animation-duration: 300ms;
-		animation-timing-function: linear;
-		animation-timing-function: ease-in-out;
 
 		&-row {
 			height: 50px;