diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue
index 7171127aa..6265fb519 100644
--- a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue
+++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/CompactRankList.vue
@@ -1,11 +1,36 @@
- compact rank list
+
diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue
index 5326e055f..fa4dd0aa4 100644
--- a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue
+++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/RankList.vue
@@ -163,12 +163,13 @@ export default Vue.extend({
diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/_rank-list.scss b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/_rank-list.scss
new file mode 100644
index 000000000..c27b0b5fb
--- /dev/null
+++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/_rank-list.scss
@@ -0,0 +1,31 @@
+@mixin rank-list-common {
+ & &-loading-container {
+ @include v-center();
+ justify-content: center;
+ padding: var(--padding);
+ border-radius: var(--home-card-radius);
+ border: 2px dashed #8884;
+ height: 100%;
+ }
+ & &-empty {
+ @include v-center(12px);
+ justify-content: center;
+ .be-button {
+ padding: 4px 10px 4px 6px !important;
+ &:hover .be-icon {
+ transform: rotate(1turn);
+ }
+ }
+ .be-icon {
+ margin-right: 6px;
+ transition: 0.5s ease-out;
+ }
+ }
+
+ &.loaded {
+ @include no-scrollbar();
+ .animation {
+ animation-play-state: running;
+ }
+ }
+}
diff --git a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts
index 8643135ac..f2700f5ce 100644
--- a/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts
+++ b/registry/lib/components/style/home-redesign/fresh/layouts/categories/content/rank-list.ts
@@ -11,6 +11,7 @@ export interface RankListCard {
dynamic?: string
}
export const rankListCssVars = {
+ panelWidth: 400,
panelHeight: 608,
padding: 12,
rankItemHeight: 110,
@@ -23,3 +24,8 @@ export const rankListCssVars = {
thirdCoverHeight: 90,
thirdCoverWidth: 139,
}
+export const compactRankListCssVars = {
+ panelWidth: 400,
+ panelHeight: 608,
+ padding: 12,
+}