style(stalker): use different ghosts for category and category content view

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) {

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;
+}