removed swiper from lab image

src/components/lab/LabImage/index.tsx

@@ -1,7 +1,6 @@
-import React, { FC, useCallback, useEffect, useState } from 'react';
+import React, { FC } from 'react';
 import { INodeComponentProps } from '~/redux/node/constants';
 import SwiperCore, { A11y, Navigation, Pagination, SwiperOptions } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
 
 import 'swiper/swiper.scss';
 import 'swiper/components/pagination/pagination.scss';
@@ -11,9 +10,6 @@ import 'swiper/components/navigation/navigation.scss';
 
 import styles from './styles.module.scss';
 import { useNodeImages } from '~/utils/hooks/node/useNodeImages';
-import { getURL } from '~/utils/dom';
-import { PRESETS } from '~/constants/urls';
-import SwiperClass from 'swiper/types/swiper-class';
 import { useGotoNode } from '~/utils/hooks/node/useGotoNode';
 import { Placeholder } from '~/components/placeholders/Placeholder';
 import { normalizeBrightColor } from '~/utils/color';
@@ -30,67 +26,24 @@ const breakpoints: SwiperOptions['breakpoints'] = {
 };
 
 const LabImage: FC<IProps> = ({ node, isLoading }) => {
-  const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
-
   const images = useNodeImages(node);
-
-  const updateSwiper = useCallback(() => {
-    if (!controlledSwiper) return;
-
-    controlledSwiper.updateSlides();
-    controlledSwiper.updateSize();
-    controlledSwiper.update();
-  }, [controlledSwiper]);
-
-  const resetSwiper = useCallback(() => {
-    if (!controlledSwiper) return;
-    controlledSwiper.slideTo(0, 0);
-  }, [controlledSwiper]);
-
-  useEffect(() => {
-    updateSwiper();
-    resetSwiper();
-  }, [images, updateSwiper, resetSwiper]);
-
   const onClick = useGotoNode(node.id);
 
   if (!images?.length && !isLoading) {
     return null;
   }
 
+  const file = images[0];
+
   return (
     <Placeholder active={isLoading} width="100%" height={400}>
       <div className={styles.wrapper}>
-        <Swiper
+        <ImagePreloader
-          initialSlide={0}
+          file={file}
-          slidesPerView={images.length > 1 ? 1.1 : 1}
+          onClick={onClick}
-          onSwiper={setControlledSwiper}
+          className={styles.image}
-          grabCursor
+          color={normalizeBrightColor(file?.metadata?.dominant_color)}
-          autoHeight
+        />
-          breakpoints={breakpoints}
-          observeSlideChildren
-          observeParents
-          resizeObserver
-          watchOverflow
-          updateOnImagesReady
-          onInit={resetSwiper}
-          keyboard={{
-            enabled: true,
-            onlyInViewport: false,
-          }}
-        >
-          {images.map(file => (
-            <SwiperSlide className={styles.slide} key={file.id}>
-              <ImagePreloader
-                file={file}
-                onLoad={updateSwiper}
-                onClick={onClick}
-                className={styles.image}
-                color={normalizeBrightColor(file?.metadata?.dominant_color)}
-              />
-            </SwiperSlide>
-          ))}
-        </Swiper>
       </div>
     </Placeholder>
   );

src/components/tags/TagInput/index.tsx

@@ -130,7 +130,7 @@ const TagInput: FC<IProps> = ({ exclude, onAppend, onClearTag, onSubmit }) => {
         />
       </TagWrapper>
 
-      {onInput && focused && input?.length > 0 && ref.current && (
+      {focused && input?.length > 0 && ref.current && (
         <TagAutocomplete
           exclude={exclude}
           input={ref.current}