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,33 +95,35 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
   const tableHeight = useMemo(() => calculateHeight('4.05rem + 5px'), [calculateHeight]);
 
   return (
-    <div tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
+    <>
-      {controller.isContentEditable ? (
-        <SelectedCounter
-          totalCount={controller.schema?.stats?.count_all ?? 0}
-          selectedCount={controller.selected.length}
-          position='top-[0.3rem] left-2'
-        />
-      ) : null}
-
       {controller.isContentEditable ? <RSListToolbar /> : null}
-      <div
+      <AnimateFade tabIndex={-1} className='outline-none' onKeyDown={handleTableKey}>
-        className={clsx('border-b', {
+        {controller.isContentEditable ? (
-          'pt-[2.3rem]': controller.isContentEditable,
+          <SelectedCounter
-          'relative top-[-1px]': !controller.isContentEditable
+            totalCount={controller.schema?.stats?.count_all ?? 0}
-        })}
+            selectedCount={controller.selected.length}
-      />
+            position='top-[0.3rem] left-2'
+          />
+        ) : null}
 
-      <RSTable
+        <div
-        items={controller.schema?.items}
+          className={clsx('border-b', {
-        maxHeight={tableHeight}
+            'pt-[2.3rem]': controller.isContentEditable,
-        enableSelection={controller.isContentEditable}
+            'relative top-[-1px]': !controller.isContentEditable
-        selected={rowSelection}
+          })}
-        setSelected={handleRowSelection}
+        />
-        onEdit={onOpenEdit}
+
-        onCreateNew={() => controller.createCst(undefined, false)}
+        <RSTable
-      />
+          items={controller.schema?.items}
-    </div>
+          maxHeight={tableHeight}
+          enableSelection={controller.isContentEditable}
+          selected={rowSelection}
+          setSelected={handleRowSelection}
+          onEdit={onOpenEdit}
+          onCreateNew={() => controller.createCst(undefined, false)}
+        />
+      </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,15 +147,18 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     controller.deleteCst();
   }
 
-  function handleChangeLayout(newLayout: GraphLayout) {
+  const handleChangeLayout = useCallback(
-    if (newLayout === layout) {
+    (newLayout: GraphLayout) => {
-      return;
+      if (newLayout === layout) {
-    }
+        return;
-    setLayout(newLayout);
+      }
-    setTimeout(() => {
+      setLayout(newLayout);
-      setToggleResetView(prev => !prev);
+      setTimeout(() => {
-    }, PARAMETER.graphRefreshDelay);
+        setToggleResetView(prev => !prev);
-  }
+      }, PARAMETER.graphRefreshDelay);
+    },
+    [layout, setLayout]
+  );
 
   const handleChangeParams = useCallback(
     (params: GraphFilterParams) => {
@@ -253,25 +257,36 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
     ]
   );
 
-  return (
+  const selectors = useMemo(
-    <div tabIndex={-1} onKeyDown={handleKeyDown}>
+    () => (
-      <AnimatePresence>
+      <GraphSelectors
-        {showParamsDialog ? (
+        coloring={coloring}
-          <DlgGraphParams
+        layout={layout}
-            hideWindow={() => setShowParamsDialog(false)}
+        sizing={sizing}
-            initial={filterParams}
+        setLayout={handleChangeLayout}
-            onConfirm={handleChangeParams}
+        setColoring={setColoring}
-          />
+        setSizing={setSizing}
-        ) : 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'
       />
+    ),
+    [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 (
+    <>
       <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,41 +338,44 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
           />
         ) : null}
       </Overlay>
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
+        <AnimatePresence>
+          {showParamsDialog ? (
+            <DlgGraphParams
+              hideWindow={() => setShowParamsDialog(false)}
+              initial={filterParams}
+              onConfirm={handleChangeParams}
+            />
+          ) : null}
+        </AnimatePresence>
 
-      {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
+        <SelectedCounter
-        <Overlay
+          hideZero
-          layer='z-tooltip'
+          totalCount={controller.schema?.stats?.count_all ?? 0}
-          position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
+          selectedCount={controller.selected.length}
-          className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
+          position='top-[4.3rem] sm:top-[0.3rem] left-0'
-        >
+        />
-          <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
+
+        {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
+          <Overlay
+            layer='z-tooltip'
+            position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
+            className={clsx('w-[25rem]', 'px-3', 'overflow-y-auto', 'border shadow-md', 'clr-app')}
+          >
+            <InfoConstituenta className='pt-1 pb-2' data={hoverCstDebounced} />
+          </Overlay>
+        ) : null}
+
+        <Overlay position='top-[6.25rem] sm:top-9 left-0' className='flex gap-1'>
+          <div className='flex flex-col ml-2 w-[13.5rem]'>
+            {selectors}
+            {viewHidden}
+          </div>
         </Overlay>
-      ) : null}
 
-      <Overlay position='top-[6.25rem] sm:top-9 left-0' className='flex gap-1'>
+        {graph}
-        <div className='flex flex-col ml-2 w-[13.5rem]'>
+      </AnimateFade>
-          <GraphSelectors
+    </>
-            coloring={coloring}
-            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>
   );
 }
 

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>