add animations toggle for langs card, adjust label

frontend/frontend/src/components/Home/LanguagesLayoutSection.js

@@ -26,7 +26,7 @@ const LanguagesLayoutSection = ({ selectedOption, setSelectedOption }) => {
   ];
 
   return (
-    <Section title="Date Range">
+    <Section title="Card Layout">
       <p>Select a card layout.</p>
       <Input
         options={options}

frontend/frontend/src/pages/Home/Home.js

@@ -53,6 +53,7 @@ const HomeScreen = () => {
   const [customTitle, setCustomTitle] = useState('');
   const [langsCount, setLangsCount] = useState();
   const [hideProgress, setHideProgress] = useState(false);
+  const [enableAnimations, setEnableAnimations] = useState(true);
 
   const resetCustomization = () => {
     setSelectedTimeRange(DEFAULT_TIME_RANGE);
@@ -111,6 +112,10 @@ const HomeScreen = () => {
     fullSuffix += `&langs_count=${langsCount}`;
   }
 
+  if (!enableAnimations) {
+    fullSuffix += `&disable_animations=${!enableAnimations}`;
+  }
+
   if (hideProgress) {
     fullSuffix += `&hide_progress=${hideProgress}`;
   }
@@ -235,6 +240,8 @@ const HomeScreen = () => {
               setCustomTitle={setCustomTitle}
               langsCount={langsCount}
               setLangsCount={setLangsCount}
+              enableAnimations={enableAnimations}
+              setEnableAnimations={setEnableAnimations}
               hideProgress={hideProgress}
               setHideProgress={setHideProgress}
               fullSuffix={fullSuffix}

frontend/frontend/src/pages/Home/stages/Customize.js

@@ -32,6 +32,8 @@ const CustomizeStage = ({
   setCustomTitle,
   langsCount,
   setLangsCount,
+  enableAnimations,
+  setEnableAnimations,
   hideProgress,
   setHideProgress,
   fullSuffix,
@@ -132,6 +134,15 @@ const CustomizeStage = ({
             setVariable={setHideProgress}
           />
         )}
+        {cardType === CardTypes.TOP_LANGS && (
+          <CheckboxSection
+            title="Animations"
+            text="Enable Animations."
+            question="enable animations?"
+            variable={enableAnimations}
+            setVariable={setEnableAnimations}
+          />
+        )}
         <CheckboxSection
           title="LOC Metric"
           text="By default, LOC are measured as Added: (+) - (-). Alternatively, you can use Changed: (+) + (-)"
@@ -177,6 +188,8 @@ CustomizeStage.propTypes = {
   setCustomTitle: PropTypes.func.isRequired,
   langsCount: PropTypes.number.isRequired,
   setLangsCount: PropTypes.func.isRequired,
+  enableAnimations: PropTypes.bool.isRequired,
+  setEnableAnimations: PropTypes.func.isRequired,
   fullSuffix: PropTypes.string.isRequired,
 };