added image preloader to swiper

src/components/common/ImageLoadingWrapper/index.tsx

@@ -0,0 +1,52 @@
+import React, {
+  CSSProperties,
+  FC,
+  useCallback,
+  useMemo,
+  useReducer,
+  useState,
+} from 'react';
+
+import classNames from 'classnames';
+
+import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface ImageLoadingWrapperProps extends Omit<DivProps, 'children'> {
+  children: (props: { loading: boolean; onLoad: () => void }) => void;
+  preview?: string;
+}
+
+const ImageLoadingWrapper: FC<ImageLoadingWrapperProps> = ({
+  className,
+  children,
+  preview,
+  color,
+  ...props
+}) => {
+  const [loading, onLoad] = useReducer((v) => false, true);
+
+  const style = useMemo<CSSProperties>(
+    () => ({
+      backgroundImage: `url('${preview}')`,
+      backgroundColor: color || 'var(--color-primary)',
+    }),
+    [preview, color],
+  );
+
+  return (
+    <div className={classNames(styles.wrapper, className)} {...props}>
+      {!!loading && !!preview && (
+        <div className={styles.preview}>
+          <div className={styles.thumbnail} style={style} />
+          <LoaderCircle size={32} />
+        </div>
+      )}
+      {children({ loading, onLoad })}
+    </div>
+  );
+};
+
+export { ImageLoadingWrapper };

src/components/common/ImageLoadingWrapper/styles.module.scss

@@ -0,0 +1,26 @@
+@import 'src/styles/variables';
+
+.wrapper {
+  position: relative;
+}
+
+.preview {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  touch-action: none;
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: $gap;
+}
+
+.thumbnail {
+  filter: blur(10px);
+  position: absolute;
+  inset: 0;
+  border-radius: $radius;
+  background-size: cover;
+  background-position: 50% 50%;
+  box-sizing: border-box;
+}