F: Remove unused dependencies

README.md

@@ -33,7 +33,6 @@ This readme file is used mostly to document project dependencies and conventions
   - react-icons
   - react-router
   - react-toastify
-  - react-loader-spinner
   - react-tabs
   - react-intl
   - react-select
@@ -49,7 +48,6 @@ This readme file is used mostly to document project dependencies and conventions
   - @uiw/codemirror-themes
   - @lezer/lr
   - @dagrejs/dagre
-  - @react-spring/web
   </pre>
 </details>
 <details>

rsconcept/frontend/package-lock.json

@@ -10,7 +10,6 @@
       "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",
@@ -23,7 +22,6 @@
         "react-error-boundary": "^4.1.2",
         "react-icons": "^5.4.0",
         "react-intl": "^7.0.4",
-        "react-loader-spinner": "^6.1.6",
         "react-router": "^7.0.2",
         "react-select": "^5.9.0",
         "react-tabs": "^6.0.2",
@@ -803,21 +801,6 @@
       "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
       "license": "MIT"
     },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
-      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/memoize": "^0.8.1"
-      }
-    },
-    "node_modules/@emotion/is-prop-valid/node_modules/@emotion/memoize": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-      "license": "MIT"
-    },
     "node_modules/@emotion/memoize": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
@@ -2293,78 +2276,6 @@
         "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",
@@ -3233,12 +3144,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/stylis": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
-      "license": "MIT"
-    },
     "node_modules/@types/yargs": {
       "version": "17.0.33",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
@@ -4216,15 +4121,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001688",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz",
@@ -4536,26 +4432,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "license": "ISC",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/css-to-react-native": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-      "license": "MIT",
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -7863,6 +7739,7 @@
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
       "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -8519,6 +8396,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -8719,25 +8597,9 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "dev": true,
       "license": "MIT"
     },
-    "node_modules/react-loader-spinner": {
-      "version": "6.1.6",
-      "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-6.1.6.tgz",
-      "integrity": "sha512-x5h1Jcit7Qn03MuKlrWcMG9o12cp9SNDVHVJTNRi9TgtGPKcjKiXkou4NRfLAtXaFB3+Z8yZsVzONmPzhv2ErA==",
-      "license": "MIT",
-      "dependencies": {
-        "react-is": "^18.2.0",
-        "styled-components": "^6.1.2"
-      },
-      "engines": {
-        "node": ">= 12"
-      },
-      "peerDependencies": {
-        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -9196,12 +9058,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "license": "MIT"
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -9339,6 +9195,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -9593,80 +9450,6 @@
       "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
       "license": "MIT"
     },
-    "node_modules/styled-components": {
-      "version": "6.1.13",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz",
-      "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==",
-      "license": "MIT",
-      "dependencies": {
-        "@emotion/is-prop-valid": "1.2.2",
-        "@emotion/unitless": "0.8.1",
-        "@types/stylis": "4.2.5",
-        "css-to-react-native": "3.2.0",
-        "csstype": "3.1.3",
-        "postcss": "8.4.38",
-        "shallowequal": "1.1.0",
-        "stylis": "4.3.2",
-        "tslib": "2.6.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/styled-components"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0"
-      }
-    },
-    "node_modules/styled-components/node_modules/@emotion/unitless": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
-      "license": "MIT"
-    },
-    "node_modules/styled-components/node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/styled-components/node_modules/stylis": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
-      "license": "MIT"
-    },
-    "node_modules/styled-components/node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "license": "0BSD"
-    },
     "node_modules/stylis": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",

rsconcept/frontend/package.json

@@ -14,7 +14,6 @@
   "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",
@@ -27,7 +26,6 @@
     "react-error-boundary": "^4.1.2",
     "react-icons": "^5.4.0",
     "react-intl": "^7.0.4",
-    "react-loader-spinner": "^6.1.6",
     "react-router": "^7.0.2",
     "react-select": "^5.9.0",
     "react-tabs": "^6.0.2",

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

@@ -16,6 +16,7 @@ function UserMenu() {
   const menu = useDropdown();
 
   const navigateLogin = () => router.push(urls.login);
+
   return (
     <div ref={menu.ref} className='h-full w-[4rem] flex items-center justify-center'>
       {loading ? <Loader circular scale={1.5} /> : null}
@@ -27,7 +28,7 @@ function UserMenu() {
           onClick={navigateLogin}
         />
       ) : null}
-      {user ? (
+      {user && !loading ? (
         <NavigationButton
           className='cc-fade-in'
           icon={<IconUser2 size='1.5rem' className={adminMode && user.is_staff ? 'icon-primary' : ''} />}

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

@@ -1,5 +1,4 @@
 // =========== Module contains interfaces for common UI elements. ==========
-import { animated } from '@react-spring/web';
 import React from 'react';
 
 export namespace CProps {
@@ -89,11 +88,6 @@ export namespace CProps {
    */
   export type Input = Titled & React.ComponentProps<'input'>;
 
-  /**
-   * Represents `div` component with animation properties.
-   */
-  export type AnimatedDiv = React.ComponentPropsWithoutRef<typeof animated.div>;
-
   /**
    * Represents `mouse event` in React.
    */

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

@@ -1,7 +1,5 @@
 'use client';
 
-import { ThreeCircles, ThreeDots } from 'react-loader-spinner';
-
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 
 interface LoaderProps {
@@ -12,6 +10,47 @@ interface LoaderProps {
   circular?: boolean;
 }
 
+const animateRotation = (duration: string) => {
+  return (
+    <animateTransform
+      attributeName='transform'
+      attributeType='XML'
+      type='rotate'
+      dur={duration}
+      from='0 50 50'
+      to='360 50 50'
+      repeatCount='indefinite'
+    />
+  );
+};
+
+const animatePulse = (startBig: boolean, duration: string) => {
+  return (
+    <>
+      <animate
+        attributeName='r'
+        from={startBig ? '15' : '9'}
+        to={startBig ? '15' : '9'}
+        begin='0s'
+        dur={duration}
+        values={startBig ? '15;9;15' : '9;15;9'}
+        calcMode='linear'
+        repeatCount='indefinite'
+      />
+      <animate
+        attributeName='fill-opacity'
+        from={startBig ? '1' : '.5'}
+        to={startBig ? '.5' : '1'}
+        begin='0s'
+        dur={duration}
+        values={startBig ? '1;.5;1' : '.5;1;.5'}
+        calcMode='linear'
+        repeatCount='indefinite'
+      />
+    </>
+  );
+};
+
 /**
  * Displays animated loader.
  */
@@ -19,22 +58,35 @@ function Loader({ scale = 5, circular }: LoaderProps) {
   const { colors } = useConceptOptions();
   if (circular) {
     return (
-      <ThreeCircles
+      <div className='flex justify-center' aria-label='three-circles-loading' aria-busy='true' role='progressbar'>
-        color={colors.bgPrimary}
+        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 100 100' fill={colors.bgPrimary}>
-        height={scale * 20}
+          <path d='M31.6,3.5C5.9,13.6-6.6,42.7,3.5,68.4c10.1,25.7,39.2,38.3,64.9,28.1l-3.1-7.9c-21.3,8.4-45.4-2-53.8-23.3 c-8.4-21.3,2-45.4,23.3-53.8L31.6,3.5z'>
-        width={scale * 20}
+            {animateRotation('2.25s')}
-        wrapperClass='flex justify-center'
+          </path>
-      />
+          <path d='M82,35.7C74.1,18,53.4,10.1,35.7,18S10.1,46.6,18,64.3l7.6-3.4c-6-13.5,0-29.3,13.5-35.3s29.3,0,35.3,13.5 L82,35.7z'>
+            {animateRotation('1.75s')}
+          </path>
+          <path d='M42.3,39.6c5.7-4.3,13.9-3.1,18.1,2.7c4.3,5.7,3.1,13.9-2.7,18.1l4.1,5.5c8.8-6.5,10.6-19,4.1-27.7 c-6.5-8.8-19-10.6-27.7-4.1L42.3,39.6z'>
+            {animateRotation('0.75s')}
+          </path>
+        </svg>
+      </div>
     );
   } else {
     return (
-      <ThreeDots
+      <div className='flex justify-center' aria-busy='true' role='progressbar'>
-        color={colors.bgPrimary}
+        <svg height={`${scale * 20}`} width={`${scale * 20}`} viewBox='0 0 120 30' fill={colors.bgPrimary}>
-        height={scale * 20}
+          <circle cx='15' cy='15' r='16'>
-        width={scale * 20}
+            {animatePulse(true, '0.8s')}
-        radius={scale * 2}
+          </circle>
-        wrapperClass='flex justify-center'
+          <circle cx='60' cy='15' r='10' attributeName='fill-opacity' from='1' to='0.3'>
-      />
+            {animatePulse(false, '0.8s')}
+          </circle>
+          <circle cx='105' cy='15' r='16'>
+            {animatePulse(true, '0.8s')}
+          </circle>
+        </svg>
+      </div>
     );
   }
 }

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

@@ -1,42 +0,0 @@
-'use client';
-
-import { animated, useSpring } from '@react-spring/web';
-import { useState } from 'react';
-
-import { CProps } from '@/components/props';
-import { PARAMETER } from '@/utils/constants';
-
-interface AnimateFadeProps extends CProps.AnimatedDiv {
-  noFadeIn?: boolean;
-  noFadeOut?: boolean;
-  hideContent?: boolean;
-}
-
-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 (
-    <animated.div tabIndex={-1} style={{ ...springs, ...style }} {...restProps}>
-      {children}
-    </animated.div>
-  );
-}
-
-export default AnimateFade;

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

@@ -11,7 +11,6 @@ import Indicator from '@/components/ui/Indicator';
 import Overlay from '@/components/ui/Overlay';
 import SubmitButton from '@/components/ui/SubmitButton';
 import TextArea from '@/components/ui/TextArea';
-import AnimateFade from '@/components/wrap/AnimateFade';
 import { useRSForm } from '@/context/RSFormContext';
 import DlgShowTypeGraph from '@/dialogs/DlgShowTypeGraph';
 import { ConstituentaID, CstType, IConstituenta, ICstUpdateData } from '@/models/rsform';
@@ -199,7 +198,7 @@ function FormConstituenta({
         ) : null}
         {state ? (
           <>
-            <AnimateFade hideContent={!state.definition_formal && isElementary}>
+            {!!state.definition_formal || !isElementary ? (
               <EditorRSExpression
                 id='cst_expression'
                 label={
@@ -222,8 +221,8 @@ function FormConstituenta({
                 onOpenEdit={onOpenEdit}
                 onShowTypeGraph={handleTypeGraph}
               />
-            </AnimateFade>
+            ) : null}
-            <AnimateFade hideContent={!state.definition_raw && isElementary}>
+            {!!state.definition_raw || !isElementary ? (
               <RefsInput
                 id='cst_definition'
                 label='Текстовое определение'
@@ -238,8 +237,9 @@ function FormConstituenta({
                 disabled={disabled}
                 onChange={newValue => setTextDefinition(newValue)}
               />
-            </AnimateFade>
+            ) : null}
-            <AnimateFade hideContent={!showConvention}>
+
+            {showConvention ? (
               <TextArea
                 id='cst_convention'
                 fitContent
@@ -251,8 +251,9 @@ function FormConstituenta({
                 disabled={disabled || (isBasic && state.is_inherited)}
                 onChange={event => setConvention(event.target.value)}
               />
-            </AnimateFade>
+            ) : null}
-            <AnimateFade noFadeOut hideContent={showConvention || (disabled && !processing)}>
+
+            {!showConvention && (!disabled || processing) ? (
               <button
                 key='cst_disable_comment'
                 id='cst_disable_comment'
@@ -263,7 +264,7 @@ function FormConstituenta({
               >
                 Добавить комментарий
               </button>
-            </AnimateFade>
+            ) : null}
 
             {!disabled || processing ? (
               <div className='mx-auto flex'>

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

@@ -160,7 +160,7 @@ function EditorRSExpression({
   );
 
   return (
-    <div>
+    <div className='cc-fade-in'>
       {showAST ? (
         <DlgShowAST expression={expression} syntaxTree={syntaxTree} hideWindow={() => setShowAST(false)} />
       ) : null}

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { animated, useTransition } from '@react-spring/web';
 import clsx from 'clsx';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
 import { StatusIcon } from '@/components/DomainIcons';
 import Loader from '@/components/ui/Loader';
@@ -12,7 +11,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, PARAMETER } from '@/utils/constants';
+import { globals } from '@/utils/constants';
 import { labelExpressionStatus, prepareTooltip } from '@/utils/labels';
 
 interface StatusBarProps {
@@ -36,22 +35,12 @@ 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}
       className={clsx(
         'w-[10rem] h-[1.75rem]',
-        'px-2 flex items-center justify-center gap-2',
+        'px-2 flex items-center justify-center',
         'border',
         'select-none',
         'cursor-pointer',
@@ -63,18 +52,17 @@ function StatusBar({ isModified, processing, activeCst, parseData, onAnalyze }:
       data-tooltip-html={prepareTooltip('Проверить определение', 'Ctrl + Q')}
       onClick={onAnalyze}
     >
-      {transitions((style, flag) =>
+      {processing ? (
-        flag ? (
+        <div className='cc-fade-in'>
-          <animated.div style={style}>
+          {' '}
-            <Loader scale={3} />
+          <Loader scale={3} />
-          </animated.div>
+        </div>
-        ) : null
+      ) : null}
-      )}
+      {!processing ? (
-      {!processing && !isAnimating ? (
+        <div className='cc-fade-in flex items-center gap-2'>
-        <>
           <StatusIcon size='1rem' value={status} />
           <span className='pb-[0.125rem] font-controls pr-2'>{labelExpressionStatus(status)}</span>
-        </>
+        </div>
       ) : null}
     </div>
   );

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { animated, useSpring } from '@react-spring/web';
 import clsx from 'clsx';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import { useAccessMode } from '@/context/AccessModeContext';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
@@ -33,37 +32,6 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
 
   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
@@ -81,12 +49,8 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
     [isBottom, filteredData, activeCst, onOpenEdit, calculateHeight, accessLevel]
   );
 
-  if (!isVisible) {
-    return null;
-  }
-
   return (
-    <animated.div
+    <div
       className={clsx(
         'border', // prettier: split-lines
         {
@@ -94,7 +58,13 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
           'mt-3 mx-6 rounded-md md:max-w-[45.8rem] overflow-hidden': isBottom
         }
       )}
-      style={springs}
+      style={{
+        transitionProperty: 'opacity, width',
+        transitionDuration: `${2 * PARAMETER.moveDuration}ms`,
+        transitionTimingFunction: 'ease-in-out',
+        opacity: isMounted ? 1 : 0,
+        width: isMounted ? '100%' : '0'
+      }}
     >
       <ConstituentsSearch
         dense={windowSize.width && windowSize.width < COLUMN_DENSE_SEARCH_THRESHOLD ? true : undefined}
@@ -104,7 +74,7 @@ function ViewConstituents({ expression, schema, activeCst, isBottom, onOpenEdit,
         setFiltered={setFilteredData}
       />
       {table}
-    </animated.div>
+    </div>
   );
 }