From 53bb6e4ec7bba69a9bd135db4480ad7131d54fee Mon Sep 17 00:00:00 2001
From: 4gray <serega05@gmail.com>
Date: Thu, 4 Apr 2024 22:46:57 +0200
Subject: [PATCH] style(stalker): use different ghosts for category and
 category content view

---
 .../stalker-main-container.component.html     | 21 +++++++++++++------
 .../stalker-main-container.component.scss     |  9 +++++++-
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/stalker/stalker-main-container.component.html b/src/app/stalker/stalker-main-container.component.html
index 94c74a20b..c3d51a694 100644
--- a/src/app/stalker/stalker-main-container.component.html
+++ b/src/app/stalker/stalker-main-container.component.html
@@ -16,9 +16,9 @@
 
 @if (isLoading) {
     <div class="loading-wrapper">
-        <div class="loading-container">
-            @for (a of [].constructor(14); track $index) {
-                <div class="skeleton-item">
+        @if (currentLayout === 'category_content') {
+            <div class="loading-container category-content-view">
+                @for (a of [].constructor(14); track $index) {
                     <ngx-skeleton-loader
                         count="1"
                         [theme]="{ width: '170px', height: '270px' }"
@@ -27,9 +27,18 @@
                         count="1"
                         [theme]="{ width: '60%', height: '30px' }"
                     />
-                </div>
-            }
-        </div>
+                }
+            </div>
+        } @else if (currentLayout === 'category') {
+            <div class="loading-container category-view">
+                @for (a of [].constructor(14); track $index) {
+                    <ngx-skeleton-loader
+                        count="1"
+                        [theme]="{ width: '170px', height: '51px' }"
+                    />
+                }
+            </div>
+        }
     </div>
 } @else {
     @switch (currentLayout) {
diff --git a/src/app/stalker/stalker-main-container.component.scss b/src/app/stalker/stalker-main-container.component.scss
index af77a3d2f..45dace100 100644
--- a/src/app/stalker/stalker-main-container.component.scss
+++ b/src/app/stalker/stalker-main-container.component.scss
@@ -5,7 +5,14 @@
 
 .loading-container {
     display: flex;
-    gap: 30px;
     flex-wrap: wrap;
     justify-content: center;
 }
+
+.category-content-view {
+    gap: 30px;
+}
+
+.category-view {
+    gap: 10px;
+}