add gesture/spring/dinamic lib loading with animation provider

.github/workflows/main-actions.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: ${{matrix.node-version}}
 
       - name: Install modules
-        run: npm install --force #удалить форс после миграции на 18реакт и рефакторинга
+        run: npm install --force #TODO удалить форс после миграции на 18реакт и рефакторинга
       - name: Prod build
         run: npm run build:prod
       - name: lint ts

package.json

@@ -103,7 +103,9 @@
   },
   "dependencies": {
     "@headlessui/react": "1.6.6",
+    "@react-spring/web": "^9.7.3",
     "@reduxjs/toolkit": "^1.8.0",
+    "@use-gesture/react": "^10.3.0",
     "axios": "^1.4.0",
     "cors": "^2.8.5",
     "i18next": "^21.9.0",

src/features/notificationButton/ui/NotificationButton/NotificationButton.tsx

@@ -8,6 +8,7 @@ import { Popover } from "shared/ui/Popups";
 import { Drawer } from "shared/ui/Drawer/Drawer";
 import { BrowserView, MobileView } from "react-device-detect";
 import cls from "./NotificationButton.module.scss";
+import { AnimationProvider } from "shared/lib/components/AnimationProvider";
 
 interface NotificationButtonProps {
   className?: string;
@@ -44,9 +45,11 @@ export const NotificationButton = memo((props: NotificationButtonProps) => {
       </BrowserView>
       <MobileView>
         {trigger}
-        <Drawer isOpen={isOpen} onClose={onCloseDrawer}>
-          <NotificationList />
-        </Drawer>
+        <AnimationProvider>
+          <Drawer isOpen={isOpen} onClose={onCloseDrawer}>
+            <NotificationList />
+          </Drawer>
+        </AnimationProvider>
       </MobileView>
     </div>
   );

src/shared/lib/components/AnimationProvider/AnimationProvider.tsx

@@ -0,0 +1,61 @@
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+type GestureType = typeof import("@use-gesture/react");
+type SpringType = typeof import("@react-spring/web");
+
+interface AnimationContextPayload {
+  Gesture?: GestureType;
+  Spring?: SpringType;
+  isLoaded?: boolean;
+}
+
+const getAsyncAnimationModules = () => {
+  const Gesture = import("@use-gesture/react");
+  const Spring = import("@react-spring/web");
+
+  return Promise.all([Gesture, Spring]);
+};
+
+const AnimationContext = createContext<AnimationContextPayload>({});
+
+export const useAnimationLibs = () => {
+  return useContext(AnimationContext) as Required<AnimationContextPayload>;
+};
+
+export const AnimationProvider = ({ children }: { children: ReactNode }) => {
+  const GestureRef = useRef<GestureType>();
+  const SpringRef = useRef<SpringType>();
+
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    getAsyncAnimationModules().then(([Gesture, Spring]) => {
+      GestureRef.current = Gesture;
+      SpringRef.current = Spring;
+      setIsLoaded(true);
+    });
+  }, []);
+
+  const value = useMemo(
+    () => ({
+      Gesture: GestureRef.current,
+      Spring: SpringRef.current,
+      isLoaded,
+    }),
+    [isLoaded]
+  );
+
+  return (
+    <AnimationContext.Provider value={value}>
+      {children}
+    </AnimationContext.Provider>
+  );
+};

src/shared/lib/components/AnimationProvider/index.ts

@@ -0,0 +1 @@
+export { useAnimationLibs, AnimationProvider } from "./AnimationProvider";

src/shared/ui/Drawer/Drawer.module.scss

@@ -4,42 +4,11 @@
   bottom: 0;
   right: 0;
   left: 0;
-  opacity: 0;
-  pointer-events: none;
-  z-index: -1;
+  z-index: 100;
   display: flex;
   align-items: flex-end;
 }
 
-.content {
-  height: 70%;
-  background: var(--bg-color);
-  bottom: 0;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  position: relative;
-  width: 100%;
-  min-height: 100px;
-  padding: 20px;
-  transition: 0.3s transform;
-  transform: translateY(100%);
-  overflow-y: auto;
-  overflow-x: hidden;
-  z-index: 10000;
-}
-
-.content::before {
-  content: "";
-  position: relative;
-  display: block;
-  width: 100px;
-  height: 10px;
-  background: var(--bg-color);
-  margin: auto;
-  bottom: 40px;
-  border-radius: 12px;
-}
-
 .opened {
   pointer-events: auto;
   opacity: 1;
@@ -50,8 +19,14 @@
   }
 }
 
-.isClosing {
-  .content {
-    transform: translateY(100%);
-  }
+.sheet {
+  z-index: var(--modal-z-index);
+  position: fixed;
+  left: 2vw;
+  height: calc(100vh + 100px);
+  width: 96vw;
+  border-radius: 12px 12px 0;
+  background: var(--bg-color);
+  touch-action: none;
+  padding: 15px;
 }