F: Animation rework pt1

README.md

@@ -43,13 +43,13 @@ This readme file is used mostly to document project dependencies and conventions
   - reactflow
   - js-file-download
   - use-debounce
-  - framer-motion
   - html-to-image
   - @tanstack/react-table
   - @uiw/react-codemirror
   - @uiw/codemirror-themes
   - @lezer/lr
   - @dagrejs/dagre
+  - @react-spring/web
   </pre>
 </details>
 <details>

rsconcept/frontend/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@dagrejs/dagre": "^1.1.4",
         "@lezer/lr": "^1.4.2",
+        "@react-spring/web": "^9.7.5",
         "@tanstack/react-table": "^8.20.5",
         "@uiw/codemirror-themes": "^4.23.6",
         "@uiw/react-codemirror": "^4.23.6",
@@ -588,9 +589,9 @@
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.26.3",
+      "version": "7.26.4",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.3.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
-      "integrity": "sha512-yTmc8J+Sj8yLzwr4PD5Xb/WF3bOYu2C2OoSZPzbuqRm4n98XirsbzaX+GloeO376UnSYIYJ4NCanwV5/ugZkwA==",
+      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
@@ -2282,6 +2283,78 @@
         "node": ">=14"
       }
     },
+    "node_modules/@react-spring/animated": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+      "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/core": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+      "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-spring/donate"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/rafz": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+      "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/shared": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+      "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/rafz": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/@react-spring/types": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+      "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+      "license": "MIT"
+    },
+    "node_modules/@react-spring/web": {
+      "version": "9.7.5",
+      "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
+      "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@react-spring/animated": "~9.7.5",
+        "@react-spring/core": "~9.7.5",
+        "@react-spring/shared": "~9.7.5",
+        "@react-spring/types": "~9.7.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@reactflow/background": {
       "version": "11.3.14",
       "resolved": "https://registry.npmjs.org/@reactflow/background/-/background-11.3.14.tgz",
@@ -3024,9 +3097,9 @@
       }
     },
     "node_modules/@types/hoist-non-react-statics": {
-      "version": "3.3.5",
+      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz",
-      "integrity": "sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==",
+      "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==",
       "license": "MIT",
       "dependencies": {
         "@types/react": "*",
@@ -3095,15 +3168,15 @@
       "license": "MIT"
     },
     "node_modules/@types/prop-types": {
-      "version": "15.7.13",
+      "version": "15.7.14",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
+      "integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.13",
+      "version": "18.3.14",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.13.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.14.tgz",
-      "integrity": "sha512-ii/gswMmOievxAJed4PAHT949bpYjPKXvXo1v6cRB/kqc2ZR4n+SgyCyvyc5Fec5ez8VnUumI1Vk7j6fRyRogg==",
+      "integrity": "sha512-NzahNKvjNhVjuPBQ+2G7WlxstQ+47kXZNHlUvFakDViuIEfGY926GqhMueQFZ7woG+sPiQKlF36XfrIUVSUfFg==",
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -3111,13 +3184,13 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.1",
+      "version": "18.3.2",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.2.tgz",
-      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
+      "integrity": "sha512-Fqp+rcvem9wEnGr3RY8dYNvSQ8PoLqjZ9HLgaPUOjJJD120uDyOxOjc/39M4Kddp9JQCxpGQbnhVQF0C0ncYVg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/react": "*"
+        "@types/react": "^18"
       }
     },
     "node_modules/@types/react-transition-group": {
@@ -4059,17 +4132,16 @@
       "license": "MIT"
     },
     "node_modules/call-bind": {
-      "version": "1.0.7",
+      "version": "1.0.8",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-      "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
+      "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
+        "call-bind-apply-helpers": "^1.0.0",
         "es-define-property": "^1.0.0",
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2",
         "get-intrinsic": "^1.2.4",
-        "set-function-length": "^1.2.1"
+        "set-function-length": "^1.2.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -4078,6 +4150,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.0.tgz",
+      "integrity": "sha512-CCKAP2tkPau7D3GE8+V8R6sQubA9R5foIzGp+85EXCVSCivuxBNAWqcpn72PKYiIcqoViv/kcUDpaEIMBVi1lQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -4117,9 +4203,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001686",
+      "version": "1.0.30001687",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001686.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
-      "integrity": "sha512-Y7deg0Aergpa24M3qLC5xjNklnKnhsmSyR/V89dLZ1n0ucJIFNs7PgR2Yfa/Zf6W79SbBicgtGxZr2juHkEUIA==",
+      "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
       "dev": true,
       "funding": [
         {
@@ -4800,9 +4886,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.70",
+      "version": "1.5.71",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.70.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.71.tgz",
-      "integrity": "sha512-P6FPqAWIZrC3sHDAwBitJBs7N7IF58m39XVny7DFseQXK2eiMn7nNQizFf63mWDDUnFvaqsM8FI0+ZZfLkdUGA==",
+      "integrity": "sha512-dB68l59BI75W1BUGVTAEJy45CEVuEGy9qPVVQ8pnHyHMn36PLPPoE1mjLH+lo9rKulO3HC2OhbACI/8tCqJBcA==",
       "dev": true,
       "license": "ISC"
     },
@@ -5158,9 +5244,9 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "5.0.0",
+      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.1.0.tgz",
-      "integrity": "sha512-hIOwI+5hYGpJEc4uPRmz2ulCjAGD/N13Lukkh8cLV0i2IRk/bdZDYjgLVHj+U9Z704kLIdIO6iueGvxNur0sgw==",
+      "integrity": "sha512-mpJRtPgHN2tNAvZ35AMfqeB3Xqeo273QxrHJsbBEPWODRM4r0yB6jfoROqKEYrOn27UtRPpcpHc2UqyBSuUNTw==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -10062,9 +10148,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.0.2",
+      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.0.3.tgz",
-      "integrity": "sha512-XdQ+VsY2tJpBsKGs0wf3U/+azx8BBpYRHFAyKm5VeEZNOJZRB63q7Sc8Iup3k0TrN3KO6QgyzFf+opSbfY1y0g==",
+      "integrity": "sha512-Cmuo5P0ENTN6HxLSo6IHsjCLn/81Vgrp81oaiFFMRa8gGDj5xEjIcEpf2ZymZtZR8oU0P2JX5WuUp/rlXcHkAw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {

rsconcept/frontend/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@dagrejs/dagre": "^1.1.4",
     "@lezer/lr": "^1.4.2",
+    "@react-spring/web": "^9.7.5",
     "@tanstack/react-table": "^8.20.5",
     "@uiw/codemirror-themes": "^4.23.6",
     "@uiw/react-codemirror": "^4.23.6",
@@ -44,12 +45,12 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
-    "eslint-plugin-react-hooks": "^5.0.0",
     "@typescript-eslint/parser": "^8.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.16.0",
     "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^15.13.0",
     "jest": "^29.7.0",

rsconcept/frontend/src/app/Navigation/UserMenu.tsx

@@ -1,5 +1,3 @@
-import { AnimatePresence } from 'framer-motion';
-
 import { IconLogin, IconUser2 } from '@/components/Icons';
 import Loader from '@/components/ui/Loader';
 import AnimateFade from '@/components/wrap/AnimateFade';
@@ -21,7 +19,6 @@ function UserMenu() {
   const navigateLogin = () => router.push(urls.login);
   return (
     <div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
-      <AnimatePresence mode='wait'>
       {loading ? (
         <AnimateFade key='nav_user_badge_loader'>
           <Loader circular scale={1.5} />
@@ -44,7 +41,6 @@ function UserMenu() {
           />
         </AnimateFade>
       ) : null}
-      </AnimatePresence>
       <UserDropdown isOpen={!!user && menu.isOpen} hideDropdown={() => menu.hide()} />
     </div>
   );

rsconcept/frontend/src/components/RefsInput/RefsInput.tsx

@@ -6,7 +6,6 @@ import { createTheme } from '@uiw/codemirror-themes';
 import CodeMirror, { BasicSetupOptions, ReactCodeMirrorProps, ReactCodeMirrorRef } from '@uiw/react-codemirror';
 import clsx from 'clsx';
 import { EditorView } from 'codemirror';
-import { AnimatePresence } from 'framer-motion';
 import { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 
 import Label from '@/components/ui/Label';
@@ -207,7 +206,6 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
 
     return (
       <div className={clsx('flex flex-col gap-2', cursor)}>
-        <AnimatePresence>
         {showEditor && schema ? (
           <DlgEditReference
             hideWindow={hideEditReference}
@@ -222,7 +220,6 @@ const RefsInput = forwardRef<ReactCodeMirrorRef, RefsInputInputProps>(
             onSave={handleInputReference}
           />
         ) : null}
-        </AnimatePresence>
         <Label text={label} />
         <CodeMirror
           id={id}

rsconcept/frontend/src/components/props.d.ts

@@ -1,5 +1,7 @@
 // =========== Module contains interfaces for common UI elements. ==========
+import { animated } from '@react-spring/web';
 import { HTMLMotionProps } from 'framer-motion';
+import React from 'react';
 
 export namespace CProps {
   /**
@@ -96,7 +98,7 @@ export namespace CProps {
   /**
    * Represents `div` component with animation properties.
    */
-  export type AnimatedDiv = HTMLMotionProps<'div'>;
+  export type AnimatedDiv = React.ComponentPropsWithoutRef<typeof animated.div>;
 
   /**
    * Represents `mouse event` in React.

rsconcept/frontend/src/components/ui/Loader.tsx

@@ -4,8 +4,6 @@ import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
 
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 
-import AnimateFade from '../wrap/AnimateFade';
-
 interface LoaderProps {
   /** Scale of the loader from 1 to 10. */
   scale?: number;
@@ -19,15 +17,26 @@ interface LoaderProps {
  */
 function Loader({ scale = 5, circular }: LoaderProps) {
   const { colors } = useConceptOptions();
+  if (circular) {
     return (
-    <AnimateFade noFadeIn className='flex justify-center'>
+      <ThreeCircles
-      {circular ? (
+        color={colors.bgPrimary}
-        <ThreeCircles color={colors.bgPrimary} height={scale * 20} width={scale * 20} />
+        height={scale * 20}
-      ) : (
+        width={scale * 20}
-        <ThreeDots color={colors.bgPrimary} height={scale * 20} width={scale * 20} radius={scale * 2} />
+        wrapperClass='flex justify-center'
-      )}
+      />
-    </AnimateFade>
     );
+  } else {
+    return (
+      <ThreeDots
+        color={colors.bgPrimary}
+        height={scale * 20}
+        width={scale * 20}
+        radius={scale * 2}
+        wrapperClass='flex justify-center'
+      />
+    );
+  }
 }
 
 export default Loader;

rsconcept/frontend/src/components/ui/Modal.tsx

@@ -130,7 +130,7 @@ function Modal({
 
         <div
           className={clsx(
-            'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)]',
+            'overscroll-contain max-h-[calc(100svh-8rem)] max-w-[100svw] xs:max-w-[calc(100svw-2rem)] outline-none',
             {
               'overflow-auto': !overflowVisible,
               'overflow-visible': overflowVisible

rsconcept/frontend/src/components/wrap/AnimateFade.tsx

@@ -1,8 +1,10 @@
-import { motion } from 'framer-motion';
+'use client';
 
-import { animateFade } from '@/styling/animations';
+import { animated, useSpring } from '@react-spring/web';
+import { useState } from 'react';
 
-import { CProps } from '../props';
+import { CProps } from '@/components/props';
+import { PARAMETER } from '@/utils/constants';
 
 interface AnimateFadeProps extends CProps.AnimatedDiv {
   noFadeIn?: boolean;
@@ -10,19 +12,30 @@ interface AnimateFadeProps extends CProps.AnimatedDiv {
   hideContent?: boolean;
 }
 
-function AnimateFade({ style, noFadeIn, noFadeOut, children, hideContent, ...restProps }: AnimateFadeProps) {
+function AnimateFade({ style, noFadeIn, noFadeOut, hideContent, children, ...restProps }: AnimateFadeProps) {
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const springs = useSpring({
+    config: { duration: PARAMETER.fadeDuration, clamp: true },
+    from: { opacity: noFadeIn ? 1 : 0 },
+    to: {
+      opacity: hideContent ? 0 : 1,
+      display: hideContent === undefined ? undefined : !isAnimating || (noFadeOut && hideContent) ? 'none' : 'block'
+    },
+    enter: { opacity: 0 },
+    leave: { opacity: noFadeOut ? 1 : 0 },
+    onStart: () => {
+      if (!hideContent) setIsAnimating(true);
+    },
+    onRest: () => {
+      if (hideContent) setIsAnimating(false);
+    }
+  });
+
   return (
-    <motion.div
+    <animated.div tabIndex={-1} style={{ ...springs, ...style }} {...restProps}>
-      tabIndex={-1}
-      initial={{ ...(!noFadeIn ? animateFade.initial : {}) }}
-      animate={hideContent ? 'hidden' : 'active'}
-      variants={animateFade.variants}
-      exit={{ ...(!noFadeOut ? animateFade.exit : {}) }}
-      style={{ display: hideContent ? 'none' : '', willChange: 'auto', ...style }}
-      {...restProps}
-    >
       {children}
-    </motion.div>
+    </animated.div>
   );
 }
 

rsconcept/frontend/src/components/wrap/DataLoader.tsx

@@ -1,5 +1,3 @@
-import { AnimatePresence } from 'framer-motion';
-
 import InfoError, { ErrorData } from '../info/InfoError';
 import { CProps } from '../props';
 import Loader from '../ui/Loader';
@@ -23,7 +21,7 @@ function DataLoader({
   ...restProps
 }: React.PropsWithChildren<DataLoaderProps>) {
   return (
-    <AnimatePresence mode='wait'>
+    <>
       {!isLoading && !error && !hasNoData ? (
         <AnimateFade id={id} key={`${id}-data`} className={className} {...restProps}>
           {children}
@@ -36,7 +34,7 @@ function DataLoader({
       ) : null}
       {isLoading ? <Loader key={`${id}-loader`} /> : null}
       {error ? <InfoError key={`${id}-error`} error={error} /> : null}
-    </AnimatePresence>
+    </>
   );
 }
 

rsconcept/frontend/src/components/wrap/RequireAuth.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { AnimatePresence } from 'framer-motion';
-
 import { useAuth } from '@/context/AuthContext';
 
 import Loader from '../ui/Loader';
@@ -12,7 +10,7 @@ function RequireAuth({ children }: React.PropsWithChildren) {
   const { user, loading } = useAuth();
 
   return (
-    <AnimatePresence mode='wait'>
+    <>
       {loading ? <Loader key='auth-loader' /> : null}
       {!loading && user ? <AnimateFade key='auth-data'>{children}</AnimateFade> : null}
       {!loading && !user ? (
@@ -23,7 +21,7 @@ function RequireAuth({ children }: React.PropsWithChildren) {
           <TextURL text='Начальная страница' href='/' />
         </AnimateFade>
       ) : null}
-    </AnimatePresence>
+    </>
   );
 }
 

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 
 import BadgeHelp from '@/components/info/BadgeHelp';
@@ -9,7 +8,6 @@ import RSInput from '@/components/RSInput';
 import SelectSingle from '@/components/ui/SelectSingle';
 import TextArea from '@/components/ui/TextArea';
 import TextInput from '@/components/ui/TextInput';
-import AnimateFade from '@/components/wrap/AnimateFade';
 import { HelpTopic } from '@/models/miscellaneous';
 import { CstType, ICstCreateData, IRSForm } from '@/models/rsform';
 import { generateAlias, isBaseSet, isBasicConcept, isFunctional, validateNewAlias } from '@/models/rsformAPI';
@@ -48,8 +46,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
   );
 
   return (
-    <AnimatePresence>
+    <>
-      <div key='dlg_cst_alias_picker' className='flex items-center self-center gap-3'>
+      <div className='flex items-center self-center gap-3'>
         <SelectSingle
           id='dlg_cst_type'
           placeholder='Выберите тип'
@@ -72,8 +70,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')}
         />
       </div>
+
       <TextArea
-        key='dlg_cst_term'
         id='dlg_cst_term'
         fitContent
         spellCheck
@@ -83,7 +81,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         value={state.term_raw}
         onChange={event => partialUpdate({ term_raw: event.target.value })}
       />
-      <AnimateFade key='dlg_cst_expression' hideContent={!state.definition_formal && isElementary}>
+
+      {!!state.definition_formal || !isElementary ? (
         <RSInput
           id='dlg_cst_expression'
           noTooltip
@@ -101,8 +100,9 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           onChange={value => partialUpdate({ definition_formal: value })}
           schema={schema}
         />
-      </AnimateFade>
+      ) : null}
-      <AnimateFade key='dlg_cst_definition' hideContent={!state.definition_raw && isElementary}>
+
+      {!!state.definition_raw || !isElementary ? (
         <TextArea
           id='dlg_cst_definition'
           spellCheck
@@ -113,10 +113,10 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           value={state.definition_raw}
           onChange={event => partialUpdate({ definition_raw: event.target.value })}
         />
-      </AnimateFade>
+      ) : null}
+
       {!showConvention ? (
         <button
-          key='dlg_cst_show_comment'
           id='dlg_cst_show_comment'
           tabIndex={-1}
           type='button'
@@ -125,10 +125,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         >
           Добавить комментарий
         </button>
-      ) : null}
+      ) : (
-      <AnimateFade hideContent={!showConvention}>
         <TextArea
-          key='dlg_cst_convention'
           id='dlg_cst_convention'
           spellCheck
           fitContent
@@ -138,8 +136,8 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
           value={state.convention}
           onChange={event => partialUpdate({ convention: event.target.value })}
         />
-      </AnimateFade>
+      )}
-    </AnimatePresence>
+    </>
   );
 }
 

rsconcept/frontend/src/pages/ManualsPage/TopicsDropdown.tsx

@@ -52,12 +52,12 @@ function TopicsDropdown({ activeTopic, onChangeTopic }: TopicsDropdownProps) {
         title='Список тем'
         hideTitle={menu.isOpen}
         icon={!menu.isOpen ? <IconMenuUnfold size='1.25rem' /> : <IconMenuFold size='1.25rem' />}
-        className='w-[3rem] h-7 rounded-none'
+        className={clsx('w-[3rem] h-7 rounded-none border-l-0', menu.isOpen && 'border-b-0')}
         onClick={menu.toggle}
       />
       <motion.div
         className={clsx(
-          'border divide-y rounded-none', // prettier: split-lines
+          'border border-l-0 divide-y rounded-none', // prettier: split-lines
           'cc-scroll-y',
           'clr-controls'
         )}

rsconcept/frontend/src/pages/OssPage/OssEditContext.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import { AnimatePresence } from 'framer-motion';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -418,7 +417,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
       }}
     >
       {model.schema ? (
-        <AnimatePresence>
+        <>
           {showEditEditors ? (
             <DlgEditEditors
               hideWindow={() => setShowEditEditors(false)}
@@ -472,8 +471,7 @@ export const OssEditState = ({ selected, setSelected, children }: React.PropsWit
               onSubmit={handleRelocateConstituents}
             />
           ) : null}
-          )
+        </>
-        </AnimatePresence>
       ) : null}
 
       {children}

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

@@ -1,7 +1,6 @@
 'use client';
 
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
 import { useMemo, useState } from 'react';
 
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
@@ -109,17 +108,14 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
             onRename={controller.renameCst}
             onOpenEdit={onOpenEdit}
           />
-          <AnimatePresence initial={false}>
-            {showList ? (
           <ViewConstituents
+            isMounted={showList}
             schema={controller.schema}
             expression={activeCst?.definition_formal ?? ''}
             isBottom={isNarrow}
             activeCst={activeCst}
             onOpenEdit={onOpenEdit}
           />
-            ) : null}
-          </AnimatePresence>
         </div>
       </div>
     </>

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

@@ -1,7 +1,6 @@
 'use client';
 
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
 import { useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -156,11 +155,9 @@ function FormConstituenta({
 
   return (
     <AnimateFade className='mx-0 md:mx-auto pt-[2rem] xs:pt-0'>
-      <AnimatePresence>
       {showTypification && state ? (
         <DlgShowTypeGraph items={typeInfo ? [typeInfo] : []} hideWindow={() => setShowTypification(false)} />
       ) : null}
-      </AnimatePresence>
       {state ? (
         <ControlsOverlay
           disabled={disabled}
@@ -201,12 +198,8 @@ function FormConstituenta({
           />
         ) : null}
         {state ? (
-          <AnimatePresence>
+          <>
-            <AnimateFade
+            <AnimateFade hideContent={!state.definition_formal && isElementary}>
-              key='cst_expression_fade'
-              hideContent={!state.definition_formal && isElementary}
-              style={{ willChange: 'auto' }}
-            >
               <EditorRSExpression
                 id='cst_expression'
                 label={
@@ -230,7 +223,7 @@ function FormConstituenta({
                 onShowTypeGraph={handleTypeGraph}
               />
             </AnimateFade>
-            <AnimateFade key='cst_definition_fade' hideContent={!state.definition_raw && isElementary}>
+            <AnimateFade hideContent={!state.definition_raw && isElementary}>
               <RefsInput
                 id='cst_definition'
                 label='Текстовое определение'
@@ -246,7 +239,7 @@ function FormConstituenta({
                 onChange={newValue => setTextDefinition(newValue)}
               />
             </AnimateFade>
-            <AnimateFade key='cst_convention_fade' hideContent={!showConvention}>
+            <AnimateFade hideContent={!showConvention}>
               <TextArea
                 id='cst_convention'
                 fitContent
@@ -259,7 +252,7 @@ function FormConstituenta({
                 onChange={event => setConvention(event.target.value)}
               />
             </AnimateFade>
-            <AnimateFade key='cst_convention_button' hideContent={showConvention || (disabled && !processing)}>
+            <AnimateFade noFadeOut hideContent={showConvention || (disabled && !processing)}>
               <button
                 key='cst_disable_comment'
                 id='cst_disable_comment'
@@ -297,7 +290,7 @@ function FormConstituenta({
                 </Overlay>
               </div>
             ) : null}
-          </AnimatePresence>
+          </>
         ) : null}
       </form>
     </AnimateFade>

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { ReactCodeMirrorRef } from '@uiw/react-codemirror';
-import { AnimatePresence } from 'framer-motion';
 import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -162,11 +161,9 @@ function EditorRSExpression({
 
   return (
     <div>
-      <AnimatePresence>
       {showAST ? (
         <DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
       ) : null}
-      </AnimatePresence>
 
       <ToolbarRSExpression
         disabled={disabled}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/StatusBar.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { animated, useTransition } from '@react-spring/web';
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
+import { useMemo, useState } from 'react';
-import { useMemo } from 'react';
 
 import { StatusIcon } from '@/components/DomainIcons';
 import Loader from '@/components/ui/Loader';
@@ -12,7 +12,7 @@ import { type IConstituenta } from '@/models/rsform';
 import { inferStatus } from '@/models/rsformAPI';
 import { IExpressionParse, ParsingStatus } from '@/models/rslang';
 import { colorStatusBar } from '@/styling/color';
-import { globals } from '@/utils/constants';
+import { globals, PARAMETER } from '@/utils/constants';
 import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
 
 interface StatusBarProps {
@@ -36,6 +36,16 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
     return inferStatus(activeCst.parse.status, activeCst.parse.valueClass);
   }, [isModified, activeCst, parseData]);
 
+  const [isAnimating, setIsAnimating] = useState(false);
+  const transitions = useTransition(processing, {
+    from: { opacity: 1 },
+    enter: { opacity: 1 },
+    leave: { opacity: 0 },
+    onStart: () => setIsAnimating(true),
+    onRest: () => setIsAnimating(false),
+    config: { duration: PARAMETER.fadeDuration }
+  });
+
   return (
     <div
       tabIndex={0}
@@ -53,17 +63,19 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
       data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
       onClick={onAnalyze}
     >
-      <AnimatePresence mode='wait'>
+      {transitions((style, flag) =>
-        {processing ? <Loader key='status-loader' scale={3} /> : null}
+        flag ? (
-        {!processing ? (
+          <animated.div style={style}>
+            <Loader scale={3} />
+          </animated.div>
+        ) : null
+      )}
+      {!processing && !isAnimating ? (
         <>
-            <StatusIcon key='status-icon' size='1rem' value={status} />
+          <StatusIcon size='1rem' value={status} />
-            <span key='status-text' className='pb-[0.125rem] font-controls pr-2'>
+          <span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
-              {labelExpressionStatus(status)}
-            </span>
         </>
       ) : null}
-      </AnimatePresence>
     </div>
   );
 }

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

@@ -1,7 +1,6 @@
 'use client';
 
 import clsx from 'clsx';
-import { AnimatePresence } from 'framer-motion';
 import { toPng } from 'html-to-image';
 import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -376,7 +375,6 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
 
   return (
     <>
-      <AnimatePresence>
       {showParamsDialog ? (
         <DlgGraphParams
           hideWindow={() => setShowParamsDialog(false)}
@@ -384,7 +382,6 @@ function TGFlow({ onOpenEdit }: TGFlowProps) {
           onConfirm={handleChangeParams}
         />
       ) : null}
-      </AnimatePresence>
 
       <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
         <Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>

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

@@ -1,6 +1,5 @@
 'use client';
 
-import { AnimatePresence } from 'framer-motion';
 import fileDownload from 'js-file-download';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -684,7 +683,7 @@ export const RSEditState = ({
       }}
     >
       {model.schema ? (
-        <AnimatePresence>
+        <>
           {showUpload ? <DlgUploadRSForm hideWindow={() => setShowUpload(false)} /> : null}
           {showClone ? (
             <DlgCloneLibraryItem
@@ -782,7 +781,7 @@ export const RSEditState = ({
           ) : null}
 
           {showTypeGraph ? <DlgShowTypeGraph items={typeInfo} hideWindow={() => setShowTypeGraph(false)} /> : null}
-        </AnimatePresence>
+        </>
       ) : null}
 
       {children}

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

@@ -1,15 +1,15 @@
 'use client';
 
+import { animated, useSpring } from '@react-spring/web';
 import clsx from 'clsx';
-import { motion } from 'framer-motion';
+import { useEffect, useMemo, useRef, useState } from 'react';
-import { useMemo, useState } from 'react';
 
 import { useAccessMode } from '@/context/AccessModeContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import useWindowSize from '@/hooks/useWindowSize';
 import { ConstituentaID, IConstituenta, IRSForm } from '@/models/rsform';
 import { UserLevel } from '@/models/user';
-import { animateSideView } from '@/styling/animations';
+import { PARAMETER } from '@/utils/constants';
 
 import ConstituentsSearch from './ConstituentsSearch';
 import TableSideConstituents from './TableSideConstituents';
@@ -23,15 +23,47 @@ interface ViewConstituentsProps {
   activeCst?: IConstituenta;
   schema?: IRSForm;
   onOpenEdit: (cstID: ConstituentaID) => void;
+  isMounted: boolean;
 }
 
-function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit }: ViewConstituentsProps) {
+function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit, isMounted }: ViewConstituentsProps) {
   const { calculateHeight } = useConceptOptions();
   const windowSize = useWindowSize();
   const { accessLevel } = useAccessMode();
 
   const [filteredData, setFilteredData] = useState<IConstituenta[]>(schema?.items ?? []);
 
+  const [isVisible, setIsVisible] = useState(true);
+  const isFirstRender = useRef(true);
+  const springs = useSpring({
+    from: { opacity: 0, width: '0' },
+    to: async next => {
+      if (isFirstRender.current) {
+        await next({ opacity: isMounted ? 1 : 0, width: isMounted ? '100%' : '0', config: { duration: 0 } });
+        isFirstRender.current = false;
+      } else {
+        if (isMounted) {
+          await next({ width: '100%', config: { duration: PARAMETER.moveDuration } });
+          await next({ opacity: 1, config: { duration: PARAMETER.fadeDuration } });
+        } else {
+          await next({ opacity: 0, config: { duration: PARAMETER.fadeDuration } });
+          await next({ width: '0', config: { duration: PARAMETER.moveDuration } });
+        }
+      }
+    },
+    onRest: props => {
+      if (props.finished && !isMounted) {
+        setIsVisible(false);
+      }
+    }
+  });
+
+  useEffect(() => {
+    if (isMounted) {
+      setIsVisible(true);
+    }
+  }, [isMounted]);
+
   const table = useMemo(
     () => (
       <TableSideConstituents
@@ -49,8 +81,12 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
     [isBottom, filteredData, activeCst, onOpenEdit, calculateHeight, accessLevel]
   );
 
+  if (!isVisible) {
+    return null;
+  }
+
   return (
-    <motion.div
+    <animated.div
       className={clsx(
         'border', // prettier: split-lines
         {
@@ -58,9 +94,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
           'mt-3 mx-6 rounded-md md:max-w-[45.8rem] overflow-hidden': isBottom
         }
       )}
-      initial={{ ...animateSideView.initial }}
+      style={springs}
-      animate={{ ...animateSideView.animate }}
-      exit={{ ...animateSideView.exit }}
     >
       <ConstituentsSearch
         dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
@@ -70,7 +104,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit
         setFiltered={setFilteredData}
       />
       {table}
-    </motion.div>
+    </animated.div>
   );
 }
 

rsconcept/frontend/src/pages/RegisterPage/RegisterPage.tsx

@@ -1,5 +1,3 @@
-import { AnimatePresence } from 'framer-motion';
-
 import Loader from '@/components/ui/Loader';
 import AnimateFade from '@/components/wrap/AnimateFade';
 import ExpectedAnonymous from '@/components/wrap/ExpectedAnonymous';
@@ -13,7 +11,7 @@ function RegisterPage() {
   if (loading) {
     return <Loader />;
   }
-  if (user && !loading) {
+  if (user) {
     return (
       <AnimateFade>
         <ExpectedAnonymous />
@@ -21,19 +19,9 @@ function RegisterPage() {
     );
   }
   return (
-    <AnimatePresence mode='wait'>
-      {loading ? <Loader key='signup-loader' /> : null}
-      {!loading && user ? (
-        <AnimateFade key='signup-has-user'>
-          <ExpectedAnonymous />
-        </AnimateFade>
-      ) : null}
-      {!loading && !user ? (
     <AnimateFade key='signup-no-user'>
       <FormSignup />
     </AnimateFade>
-      ) : null}
-    </AnimatePresence>
   );
 }
 

rsconcept/frontend/src/styling/animations.ts

@@ -186,38 +186,6 @@ export const animateParseResults: Variants = {
   }
 };
 
-export const animateSideView = {
-  initial: {
-    width: 0,
-    opacity: 0
-  },
-  animate: {
-    width: 'auto',
-    opacity: 1,
-    transition: {
-      width: {
-        duration: 0.4
-      },
-      opacity: {
-        delay: 0.4,
-        duration: 0
-      }
-    }
-  },
-  exit: {
-    width: 0,
-    opacity: 0,
-    transition: {
-      width: {
-        duration: 0.4
-      },
-      opacity: {
-        duration: 0
-      }
-    }
-  }
-};
-
 export const animateSideMinWidth = (width: string) => ({
   initial: {
     minWidth: 0,
@@ -306,35 +274,3 @@ export const animateModal = {
     }
   }
 };
-
-export const animateFade = {
-  initial: {
-    opacity: 0
-  },
-  variants: {
-    active: {
-      opacity: 1,
-      transition: {
-        type: 'tween',
-        ease: 'linear',
-        duration: 0.4
-      }
-    },
-    hidden: {
-      opacity: 0,
-      transition: {
-        type: 'tween',
-        ease: 'linear',
-        duration: 0.4
-      }
-    }
-  },
-  exit: {
-    opacity: 0,
-    transition: {
-      type: 'tween',
-      ease: 'linear',
-      duration: 0.4
-    }
-  }
-};

rsconcept/frontend/src/utils/constants.ts

@@ -21,6 +21,9 @@ export const PARAMETER = {
   ossDistanceX: 180, // pixels - insert x-distance between node centers
   ossDistanceY: 100, // pixels - insert y-distance between node centers
 
+  fadeDuration: 300, // milliseconds - duration of fade animation
+  moveDuration: 700, // milliseconds - duration of move animation
+
   graphHandleSize: 3, // pixels - size of graph connection handle
   graphNodeRadius: 20, // pixels - radius of graph node
   graphNodePadding: 5, // pixels - padding of graph node