Remove redundant animation

rsconcept/frontend/src/pages/LibraryPage/LibraryFolders.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { AnimatePresence, motion } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -11,7 +11,7 @@ import { CProps } from '@/components/props';
 import MiniButton from '@/components/ui/MiniButton';
 import { FolderNode, FolderTree } from '@/models/FolderTree';
 import { HelpTopic } from '@/models/miscellaneous';
-import { animateSideAppear, animateSideView } from '@/styling/animations';
+import { animateSideView } from '@/styling/animations';
 import { PARAMETER, prefixes } from '@/utils/constants';
 import { information, labelFolderNode } from '@/utils/labels';
 
@@ -102,57 +102,52 @@ function LibraryFolders({ folders, currentFolder, setFolder, toggleFolderMode }:
           'cc-scroll-y'
         )}
       >
-        <AnimatePresence>
+        {items.map((item, index) =>
-          {items.map((item, index) =>
+          !item.parent || !folded.includes(item.parent) ? (
-            !item.parent || !folded.includes(item.parent) ? (
+            <div
-              <motion.div
+              tabIndex={-1}
-                tabIndex={-1}
+              key={`${prefixes.folders_list}${index}`}
-                key={`${prefixes.folders_list}${index}`}
+              className={clsx(
-                className={clsx(
+                'min-h-[2.0825rem] sm:min-h-[2.3125rem]',
-                  'min-h-[2.0825rem] sm:min-h-[2.3125rem]',
+                'pr-3 flex items-center gap-2',
-                  'pr-3 flex items-center gap-2',
+                'cc-scroll-row',
-                  'cc-scroll-row',
+                'clr-hover',
-                  'clr-hover',
+                'cursor-pointer',
-                  'cursor-pointer',
+                activeNode === item && 'clr-selected'
-                  activeNode === item && 'clr-selected'
+              )}
-                )}
+              style={{ paddingLeft: `${(item.rank > 5 ? 5 : item.rank) * 0.5 + 0.5}rem` }}
-                style={{ paddingLeft: `${(item.rank > 5 ? 5 : item.rank) * 0.5 + 0.5}rem` }}
+              onClick={event => handleClickFolder(event, item)}
-                onClick={event => handleClickFolder(event, item)}
+            >
-                initial={{ ...animateSideAppear.initial }}
+              {item.children.size > 0 ? (
-                animate={{ ...animateSideAppear.animate }}
+                <MiniButton
-                exit={{ ...animateSideAppear.exit }}
+                  noPadding
-              >
+                  noHover
-                {item.children.size > 0 ? (
+                  icon={
-                  <MiniButton
+                    folded.includes(item) ? (
-                    noPadding
+                      item.filesInside ? (
-                    noHover
+                        <IconFolderClosed size='1rem' className='icon-primary' />
-                    icon={
-                      folded.includes(item) ? (
-                        item.filesInside ? (
-                          <IconFolderClosed size='1rem' className='icon-primary' />
-                        ) : (
-                          <IconFolderEmpty size='1rem' className='icon-primary' />
-                        )
                       ) : (
-                        <IconFolderOpened size='1rem' className='icon-green' />
+                        <IconFolderEmpty size='1rem' className='icon-primary' />
                       )
-                    }
-                    onClick={event => handleClickFold(event, item, folded.includes(item))}
-                  />
-                ) : (
-                  <div>
-                    {item.filesInside ? (
-                      <IconFolder size='1rem' className='clr-text-default' />
                     ) : (
-                      <IconFolderEmpty size='1rem' className='clr-text-controls' />
+                      <IconFolderOpened size='1rem' className='icon-green' />
-                    )}
+                    )
-                  </div>
+                  }
-                )}
+                  onClick={event => handleClickFold(event, item, folded.includes(item))}
-                <div className='self-center'>{labelFolderNode(item)}</div>
+                />
-              </motion.div>
+              ) : (
-            ) : null
+                <div>
-          )}
+                  {item.filesInside ? (
-        </AnimatePresence>
+                    <IconFolder size='1rem' className='clr-text-default' />
+                  ) : (
+                    <IconFolderEmpty size='1rem' className='clr-text-controls' />
+                  )}
+                </div>
+              )}
+              <div className='self-center'>{labelFolderNode(item)}</div>
+            </div>
+          ) : null
+        )}
       </div>
     </motion.div>
   );