feat: improve the lazy loading tab

.eslintrc

@@ -11,7 +11,7 @@
 		"ecmaVersion": 2021,
 		"sourceType": "module"
 	},
-	"ignorePatterns": [ "node_modules", "assets/js"  ],
+	"ignorePatterns": [ "node_modules", "assets/js", "**/*.d.ts"  ],
 	"rules": {
 		"camelcase" : "off",
 		"indent": [

assets/src/dashboard/parts/components/GroupSettingsContainer.js

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+
+export const GroupSettingsContainer = ({ children, className = '' }) => {
+	return (
+		<div className={classNames( 'my-4 p-4 rounded border-solid border-gray-200 bg-slate-100', className )}>
+			{ children }
+		</div>
+	);
+};
+
+export const GroupSettingsTitle = ({ children, className = '' }) => {
+	return (
+		<h3 className={classNames( 'text-sm text-slate-500 m-0 font-semibold mb-4 uppercase', className )}>
+			{ children }
+		</h3>
+	);
+};
+
+export const GroupSettingsOption = ({ children, className = '' }) => {
+	return (
+		<div className={classNames( 'text-sm text-gray-600 px-4 py-2 bg-white flex items-center rounded', className )}>
+			{ children }
+		</div>
+	);
+};

assets/src/dashboard/parts/components/Miscellaneous.js

@@ -0,0 +1,37 @@
+import classNames from 'classnames';
+
+export const TextWithWarningBadge = ({ text, badgeLabel }) => {
+	return (
+		<>
+			{text}
+			<span className="ml-4 text-xs font-bold p-1 rounded bg-yellow-400 text-yellow-800 uppercase">
+				{badgeLabel}
+			</span>
+		</>
+	);
+};
+
+const DescriptionTag = ({ text, showAsDisabled }) => (
+	<span
+		className={classNames(
+			'inline-block  text-xs px-2 py-1 rounded mr-2 mt-2 font-medium',
+			{
+				'bg-gray-200 text-gray-800 line-through': showAsDisabled,
+				'bg-blue-200 text-blue-800': ! showAsDisabled
+			}
+		)}
+	>
+		{text}
+	</span>
+);
+
+export const DescriptionWithTags = ({ text, tags }) => (
+	<>
+		{text}
+		<div className="mt-2">
+			{tags.map( ({ text, disabled }) => (
+				<DescriptionTag key={text} text={text} showAsDisabled={disabled} />
+			) )}
+		</div>
+	</>
+);

assets/src/dashboard/parts/components/RadioBoxes.js

@@ -43,6 +43,8 @@ export default function RadioBoxes({ options, value, onChange, label, disabled =
 							type="radio"
 							name="label"
 							value={buttonValue}
+							checked={isActive}
+							onChange={() => {}} // Add empty onChange to satisfy React's controlled input requirements
 							id={buttonValue}
 							className="!opacity-0 !w-0 !h-0 !overflow-hidden !absolute !pointer-events-none"
 							disabled={disabled}

assets/src/dashboard/parts/connected/settings/General.js

@@ -77,21 +77,6 @@ const General = ({
 
 			<hr className="my-8 border-grayish-blue"/>
 
-			<ToggleControl
-				label={ optimoleDashboardApp.strings.options_strings.toggle_lazyload }
-				help={ () => <p dangerouslySetInnerHTML={ { __html: optimoleDashboardApp.strings.options_strings.lazyload_desc } } /> }
-				checked={ isLazyloadEnabled }
-				disabled={ ! isReplacerEnabled || isLoading }
-				className={ classnames(
-					{
-						'is-disabled': ! isReplacerEnabled || isLoading
-					}
-				) }
-				onChange={ value => updateOption( 'lazyload', value ) }
-			/>
-
-			<hr className="my-8 border-grayish-blue"/>
-
 			{ isUserActive && <>
 				<ToggleControl
 					label={ optimoleDashboardApp.strings.options_strings.enable_badge_title }