new UI and handle cashing

src/views/base/home/layouts/HomeLayoutRenderer.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useUserStore } from '@/store/userStore'
-import { loading } from '@/utils'
+import { getToken } from '@/utils'
 import HomeSkeleton from '../components/HomeSkeleton.vue'
 import { getHomeLayoutConfig } from './registry'
 import { HOME_SECTION_COMPONENTS } from './sections'
@@ -12,6 +13,7 @@ const props = defineProps<{
 }>()
 
 const userStore = useUserStore()
+const { userInfo } = storeToRefs(userStore)
 const layoutConfig = computed(() => props.layoutConfig ?? getHomeLayoutConfig())
 
 const outerSections = computed(() =>
@@ -22,13 +24,17 @@ const innerSections = computed(() =>
   layoutConfig.value.sections.filter((section) => section.visible !== false)
 )
 
+/** محتوا با userInfo — داده‌های API در پس‌زمینه لود می‌شوند */
+const showContent = computed(() => Boolean(userInfo.value))
+const showSkeleton = computed(() => Boolean(getToken()) && !userInfo.value)
+
 function resolveSectionComponent(sectionId: HomeSectionId) {
   return HOME_SECTION_COMPONENTS[sectionId]
 }
 </script>
 
 <template>
-  <div v-if="userStore.userInfo && !loading">
+  <div v-if="showContent">
     <component
       :is="resolveSectionComponent(section.id)"
       v-for="section in outerSections"
@@ -52,5 +58,5 @@ function resolveSectionComponent(sectionId: HomeSectionId) {
     </template>
   </div>
 
-  <HomeSkeleton v-else class="w-full" />
+  <HomeSkeleton v-else-if="showSkeleton" class="w-full" />
 </template>