animate site features

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;

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%);
 }

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

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;