fix image cropper

Author: markusweblance

fixture/index.ts

@@ -189,7 +189,7 @@ async function ormSharedFixtureLift(adminizer: Adminizer) {
         adminizer.catalogHandler.add(new TestCatalog(adminizer, 'testcatalog'))
 
         /** Test notifications */
-        //setTimeout(() => sendNotificationsWithDelay(adminizer, {count: 150, onlyGeneral: false, generalRatio: 0.5, delayMs: 300}), 10000); // Начальная задержка 10 секунд
+        //setTimeout(() => sendNotificationsWithDelay(adminizer, {count: 150, onlyGeneral: false, generalRatio: 0.5, delayMs: 300}), 5000); // Начальная задержка 10 секунд
 
     } catch (e) {
         console.log(e)

src/assets/js/components/media-manager/components/Gallery.tsx

@@ -173,7 +173,7 @@ const Gallery = forwardRef<GalleryRef, GalleryProps>(({openMeta, crop, openVaria
     return (
         <div className="flex justify-between mt-8 gap-4 px-2 pb-4">
             <Tabs value={activeTab} className="w-full">
-                <div className="flex gap-4 mb-4">
+                <div className="flex gap-4 mb-4 flex-wrap md:flex-nowrap">
                     <Input
                         type="search"
                         placeholder={messages["Search"]}
@@ -186,43 +186,49 @@ const Gallery = forwardRef<GalleryRef, GalleryProps>(({openMeta, crop, openVaria
                         }}
                         className="w-[200px] p-2 border rounded"
                     />
-                    <TabsList className="w-full">
+                    <TabsList className="w-full]">
                         <TabsTrigger
+                            className="text-[12px] sm:text-sm"
                             value="tile-image"
                             onClick={() => handleChange('image', 'tile-image')}
                             disabled={!!pendingTab}
                         >
                             {messages["Images"]}
                         </TabsTrigger>
                         <TabsTrigger
+                            className="text-[12px] sm:text-sm"
                             value="table-video"
                             onClick={() => handleChange('video', 'table-video')}
                             disabled={!!pendingTab}
                         >
                             {messages["Videos"]}
                         </TabsTrigger>
                         <TabsTrigger
+                            className="text-[12px] sm:text-sm"
                             value="table-text"
                             onClick={() => handleChange('text', 'table-text')}
                             disabled={!!pendingTab}
                         >
                             {messages["Texts"]}
                         </TabsTrigger>
                         <TabsTrigger
+                            className="text-[12px] sm:text-sm"
                             value="table-application"
                             onClick={() => handleChange('application', 'table-application')}
                             disabled={!!pendingTab}
                         >
                             {messages["Applications"]}
                         </TabsTrigger>
                         <TabsTrigger
+                            className="text-[12px] sm:text-sm"
                             value="table-all"
                             onClick={() => handleChange('all', 'table-all')}
                             disabled={!!pendingTab}
                         >
                             {messages["Table"]}
                         </TabsTrigger>
                         <TabsTrigger
+                            className="text-[12px] sm:text-sm"
                             value="tile-all"
                             onClick={() => handleChange('all', 'tile-all')}
                             disabled={!!pendingTab}

src/assets/js/components/media-manager/components/ImageCropper.tsx

@@ -1,4 +1,4 @@
-import {useRef, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 import Cropper from "react-cropper";
 import type {ReactCropperElement, ReactCropperProps} from 'react-cropper';
 import {Button} from "@/components/ui/button.tsx";
@@ -31,7 +31,7 @@ const ImageCropper = ({
                           group,
                           messages
                       }: ImageCropperProps) => {
-    const cropperRef = useRef<ReactCropperElement>(null);
+    const cropperRef = useRef<ReactCropperElement & {cropper : {ready: boolean}}>(null);
     const [convertWebp, setConvertWebp] = useState(false);
     const [convertJpeg, setConvertJpeg] = useState(false);
     const [coordinates, setCoordinates] = useState({
@@ -42,6 +42,7 @@ const ImageCropper = ({
     });
     const [previewSrc, setPreviewSrc] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(false);
+    const [isReady, setIsReady] = useState(false);
 
     // Аналогичные настройки Cropper.js
     const cropperOptions: ReactCropperProps = {
@@ -67,6 +68,10 @@ const ImageCropper = ({
         toggleDragModeOnDblclick: true,
     };
 
+    useEffect(() => {
+        if(cropperRef.current) setIsReady(cropperRef.current?.cropper.ready)
+    }, [cropperRef.current?.cropper]);
+
     const onCrop = () => {
         if (cropperRef.current?.cropper) {
             const data = cropperRef.current.cropper.getData();
@@ -168,15 +173,18 @@ const ImageCropper = ({
     };
 
     return (
-        <div>
+        <div className="relative">
+            {!isReady && <LoaderCircle className="animate-spin absolute top-1/3 left-1/2 -translate-x-1/2"/> }
             <Cropper
                 src={window.bindPublic ? `/public${item.url}` : item.url}
                 style={{height: 540, width: "100%"}}
+                className={`${isReady ? '' : 'invisible'}`}
                 initialAspectRatio={1}
                 ref={cropperRef}
                 {...cropperOptions}
                 crop={onCrop}
             />
+
             {/* Координаты */}
             <div className="grid grid-cols-4 gap-2 mt-4">
                 {Object.entries(coordinates).map(([key, value]) => (