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>

src/views/base/home/layouts/registry.ts

@@ -1,21 +1,25 @@
-import type { Component } from 'vue'
+import { defineAsyncComponent, type Component } from 'vue'
 import { getConfigApp, isBoursecuProject } from '@/utils/config'
 import type { HomeLayoutConfig, HomeLayoutId } from './types'
 import { defaultHomeLayoutConfig } from './configs/default'
 import { boursecuHomeLayoutConfig } from './configs/boursecu'
-import HomeLayoutRenderer from './HomeLayoutRenderer.vue'
+
+export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
 
 const HOME_LAYOUT_CONFIGS: Record<HomeLayoutId, HomeLayoutConfig> = {
   default: defaultHomeLayoutConfig,
   boursecu: boursecuHomeLayoutConfig,
 }
 
-const HOME_LAYOUT_COMPONENTS: Record<HomeLayoutId, Component> = {
-  default: HomeLayoutRenderer,
-  boursecu: HomeLayoutRenderer,
-}
+let cachedLayoutRenderer: Component | null = null
 
-export const DEFAULT_HOME_LAYOUT_ID: HomeLayoutId = 'default'
+function getLayoutRenderer(): Component {
+  if (!cachedLayoutRenderer) {
+    cachedLayoutRenderer = defineAsyncComponent(() => import('./HomeLayoutRenderer.vue'))
+  }
+
+  return cachedLayoutRenderer
+}
 
 export function isHomeLayoutId(value: unknown): value is HomeLayoutId {
   return typeof value === 'string' && value in HOME_LAYOUT_CONFIGS
@@ -38,8 +42,8 @@ export function getHomeLayoutConfig(layoutId = getHomeLayoutId()): HomeLayoutCon
   return HOME_LAYOUT_CONFIGS[layoutId] ?? HOME_LAYOUT_CONFIGS[DEFAULT_HOME_LAYOUT_ID]
 }
 
-export function resolveHomeLayoutComponent(layoutId = getHomeLayoutId()): Component {
-  return HOME_LAYOUT_COMPONENTS[layoutId] ?? HOME_LAYOUT_COMPONENTS[DEFAULT_HOME_LAYOUT_ID]
+export function resolveHomeLayoutComponent(_layoutId = getHomeLayoutId()): Component {
+  return getLayoutRenderer()
 }
 
 export function registerHomeLayoutConfig(layoutId: HomeLayoutId, config: HomeLayoutConfig) {