Optimize editor performance and coverup animations

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/FormConstituenta.tsx

@@ -127,7 +127,7 @@ function FormConstituenta({
   }
 
   return (
-    <div>
+    <AnimateFade>
       <ControlsOverlay
         disabled={disabled}
         modified={isModified}
@@ -242,7 +242,7 @@ function FormConstituenta({
           ) : null}
         </AnimatePresence>
       </form>
-    </div>
+    </AnimateFade>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorRSForm/EditorRSForm.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx';
 import InfoLibraryItem from '@/components/info/InfoLibraryItem';
 import Divider from '@/components/ui/Divider';
 import FlexColumn from '@/components/ui/FlexColumn';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useAuth } from '@/context/AuthContext';
 import { useRSForm } from '@/context/RSFormContext';
 import { globals } from '@/utils/constants';
@@ -49,7 +50,11 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
         onSubmit={initiateSubmit}
         onDestroy={onDestroy}
       />
-      <div tabIndex={-1} onKeyDown={handleInput} className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}>
+      <AnimateFade
+        tabIndex={-1}
+        onKeyDown={handleInput}
+        className={clsx('flex flex-col sm:flex-row', 'sm:w-fit w-full')}
+      >
         <FlexColumn className='px-4 pb-2'>
           <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />
 
@@ -59,7 +64,7 @@ function EditorRSForm({ isModified, onDestroy, setIsModified }: EditorRSFormProp
         </FlexColumn>
 
         <RSFormStats stats={schema?.stats} />
-      </div>
+      </AnimateFade>
     </>
   );
 }

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/EditorRSList.tsx

@@ -5,6 +5,7 @@ import { useLayoutEffect, useMemo, useState } from 'react';
 
 import SelectedCounter from '@/components/info/SelectedCounter';
 import { type RowSelectionState } from '@/components/ui/DataTable';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import { ConstituentaID, CstType } from '@/models/rsform';
 
@@ -94,7 +95,9 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
   const tableHeight = useMemo(() => calculateHeight('4.05rem + 5px'), [calculateHeight]);
 
   return (
-    <div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
+    <>
+      {controller.isContentEditable ? <RSListToolbar /> : null}
+      <AnimateFade tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
         {controller.isContentEditable ? (
           <SelectedCounter
             totalCount={controller.schema?.stats?.count_all ?? 0}
@@ -103,7 +106,6 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
           />
         ) : null}
 
-      {controller.isContentEditable ? <RSListToolbar /> : null}
         <div
           className={clsx('border-b', {
             'pt-[2.3rem]': controller.isContentEditable,
@@ -120,7 +122,8 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
           onEdit={onOpenEdit}
           onCreateNew={() => controller.createCst(undefined, false)}
         />
-    </div>
+      </AnimateFade>
+    </>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/EditorTermGraph.tsx

@@ -11,6 +11,7 @@ import SelectedCounter from '@/components/info/SelectedCounter';
 import SelectGraphToolbar from '@/components/select/SelectGraphToolbar';
 import { GraphCanvasRef, GraphEdge, GraphLayout, GraphNode } from '@/components/ui/GraphUI';
 import Overlay from '@/components/ui/Overlay';
+import AnimateFade from '@/components/wrap/AnimateFade';
 import { useConceptOptions } from '@/context/OptionsContext';
 import DlgGraphParams from '@/dialogs/DlgGraphParams';
 import useLocalStorage from '@/hooks/useLocalStorage';
@@ -146,7 +147,8 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     controller.deleteCst();
   }
 
-  function handleChangeLayout(newLayout: GraphLayout) {
+  const handleChangeLayout = useCallback(
+    (newLayout: GraphLayout) => {
       if (newLayout === layout) {
         return;
       }
@@ -154,7 +156,9 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
       setTimeout(() => {
         setToggleResetView(prev => !prev);
       }, PARAMETER.graphRefreshDelay);
-  }
+    },
+    [layout, setLayout]
+  );
 
   const handleChangeParams = useCallback(
     (params: GraphFilterParams) => {
@@ -253,25 +257,36 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     ]
   );
 
+  const selectors = useMemo(
+    () => (
+      <GraphSelectors
+        coloring={coloring}
+        layout={layout}
+        sizing={sizing}
+        setLayout={handleChangeLayout}
+        setColoring={setColoring}
+        setSizing={setSizing}
+      />
+    ),
+    [coloring, layout, sizing, handleChangeLayout, setColoring, setSizing]
+  );
+  const viewHidden = useMemo(
+    () => (
+      <ViewHidden
+        items={hidden}
+        selected={controller.selected}
+        schema={controller.schema}
+        coloringScheme={coloring}
+        toggleSelection={controller.toggleSelect}
+        setFocus={handleSetFocus}
+        onEdit={onOpenEdit}
+      />
+    ),
+    [hidden, controller.selected, controller.schema, coloring, controller.toggleSelect, handleSetFocus, onOpenEdit]
+  );
+
   return (
-    <div tabIndex={-1} onKeyDown={handleKeyDown}>
+    <>
-      <AnimatePresence>
-        {showParamsDialog ? (
-          <DlgGraphParams
-            hideWindow={() => setShowParamsDialog(false)}
-            initial={filterParams}
-            onConfirm={handleChangeParams}
-          />
-        ) : null}
-      </AnimatePresence>
-
-      <SelectedCounter
-        hideZero
-        totalCount={controller.schema?.stats?.count_all ?? 0}
-        selectedCount={controller.selected.length}
-        position='top-[4.3rem] sm:top-[0.3rem] left-0'
-      />
-
       <Overlay
         position='top-0 pt-1 right-1/2 translate-x-1/2'
         className='flex flex-col items-center rounded-b-2xl cc-blur'
@@ -323,6 +338,23 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
           />
         ) : null}
       </Overlay>
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
+        <AnimatePresence>
+          {showParamsDialog ? (
+            <DlgGraphParams
+              hideWindow={() => setShowParamsDialog(false)}
+              initial={filterParams}
+              onConfirm={handleChangeParams}
+            />
+          ) : null}
+        </AnimatePresence>
+
+        <SelectedCounter
+          hideZero
+          totalCount={controller.schema?.stats?.count_all ?? 0}
+          selectedCount={controller.selected.length}
+          position='top-[4.3rem] sm:top-[0.3rem] left-0'
+        />
 
         {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
           <Overlay
@@ -336,28 +368,14 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
 
         <Overlay position='top-[6.25rem] sm:top-9 left-0' className='flex gap-1'>
           <div className='flex flex-col ml-2 w-[13.5rem]'>
-          <GraphSelectors
+            {selectors}
-            coloring={coloring}
+            {viewHidden}
-            layout={layout}
-            sizing={sizing}
-            setLayout={handleChangeLayout}
-            setColoring={setColoring}
-            setSizing={setSizing}
-          />
-          <ViewHidden
-            items={hidden}
-            selected={controller.selected}
-            schema={controller.schema}
-            coloringScheme={coloring}
-            toggleSelection={controller.toggleSelect}
-            setFocus={handleSetFocus}
-            onEdit={onOpenEdit}
-          />
           </div>
         </Overlay>
 
         {graph}
-    </div>
+      </AnimateFade>
+    </>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -221,19 +221,13 @@ function RSTabs() {
           </TabList>
 
           <AnimateFade className='overflow-y-auto' style={{ maxHeight: panelHeight }}>
-            <TabPanel forceRender style={{ display: activeTab === RSTabID.CARD ? '' : 'none' }}>
+            <TabPanel>{cardPanel}</TabPanel>
-              {cardPanel}
-            </TabPanel>
 
-            <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_LIST ? '' : 'none' }}>
+            <TabPanel>{listPanel}</TabPanel>
-              {listPanel}
-            </TabPanel>
 
-            <TabPanel forceRender style={{ display: activeTab === RSTabID.CST_EDIT ? '' : 'none' }}>
+            <TabPanel>{editorPanel}</TabPanel>
-              {editorPanel}
-            </TabPanel>
 
-            <TabPanel style={{ display: activeTab === RSTabID.TERM_GRAPH ? '' : 'none' }}>
+            <TabPanel>
               <EditorTermGraph onOpenEdit={onOpenCst} />
             </TabPanel>
           </AnimateFade>