skeleton

style.less

@@ -1,7 +1,14 @@
+/* add to basket*/
 .idm__hotspot .add_to_basket, .idm__hotspot .add_to_basket__link{
   display: flex;
   justify-content: center;
 }
+@media (max-width: 978px){
+  .idm__hotspot .add_to_basket__button.btn:not(.--error):not(.--success)::before{
+    position: static;
+  }
+}
+
 .idm__hotspot .add_to_basket.--range{
   flex-direction: column;
 }
@@ -28,27 +35,68 @@
   border-radius: 0.5rem;
   min-width: 3rem;
 }
-  @keyframes idm-skeleton-loading {
-      to {
-          background-position-x: -200%;
-      }
+
+/* SKELETON */
+@keyframes idm-skeleton-loading {
+  to {
+    background-position-x: -200%;
   }
-.idm__hotspot.idm-loading{
+}
+
+.skeleton(@width, @height, @mobileWidth, @mobileHeight, @borderRadius) {
   position: relative;
   overflow: hidden;
 
-  transition: none;
-  border-radius: 8px;
-  background: #eee;
-  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
-  background-size: 200% 100%;
-  animation: 1.5s idm-skeleton-loading linear infinite;
-  width: 100%;
+  &.idm-loading {
+    transition: none;
+    border-radius: @borderRadius;
+    background: #eee;
+    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
+    background-size: 200% 100%;
+    animation: 1.5s idm-skeleton-loading linear infinite;
+    width: @width;
+    height: @height;
+    
+    @media (max-width: 756px) {
+      width: @mobileWidth;
+      height: @mobileHeight;
+    }
+  }
+}
+
+.--hotspot-loading .products.hotspot__products.swiper-wrapper{
+  display: block!important;
+}
+
+.idm_hotspot__skeleton{
+  display: flex;
+  flex-wrap: nowrap;
+  overflow: hidden;
   height: 50rem;
+  &_product{
+    flex-shrink: 0;
+    padding-right: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  &_img{
+    aspect-ratio: ~"1 / 1";
+    .skeleton(100%, auto, 100%, auto, 8px);
+  }
+  &_name{
+    .skeleton(100%, 4.2rem, 100%, 4.2rem, 0)
+  }
+  &_price{
+    .skeleton(50%, 2rem, 50%, 2rem, 0)
+  }
+  &_btn{
+    .skeleton(100%, 4.6rem, 100%, 4.6rem, 8px)
+  }
 }
-.idm__hotspot.idm-loading .hotspot{
-  opacity: 0;
-}
+
+
+
 @media (max-width: 756px) {
   .idm__hotspot.idm-loading{
     width: 100%;
@@ -335,4 +383,14 @@
       clip-path: inset(0 0 0 0);
     }
   }
-}
+}
+
+/* Ogolne */
+.idm__hotspot{
+  .product__name{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--hotspot-name-clamp, 999);
+    overflow: hidden;
+  }
+}