feat: And surface switching loading optimization

packages/@core/uikit/layout-ui/src/components/layout-content.vue

@@ -2,7 +2,9 @@
 import type { ContentCompactType } from '@vben-core/typings';
 
 import type { CSSProperties } from 'vue';
-import { computed } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
+
+import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
 
 interface Props {
   /**
@@ -52,6 +54,14 @@ const props = withDefaults(defineProps<Props>(), {
   paddingTop: 16,
 });
 
+const domElement = ref<HTMLDivElement | null>();
+
+const { height, width } = useWindowSize();
+const contentClientHeight = useCssVar('--vben-content-client-height');
+const debouncedCalcHeight = useDebounceFn(() => {
+  contentClientHeight.value = `${domElement.value?.clientHeight ?? window.innerHeight}px`;
+}, 200);
+
 const style = computed((): CSSProperties => {
   const {
     contentCompact,
@@ -76,10 +86,18 @@ const style = computed((): CSSProperties => {
     paddingTop: `${paddingTop}px`,
   };
 });
+
+watch([height, width], () => {
+  debouncedCalcHeight();
+});
+
+onMounted(() => {
+  debouncedCalcHeight();
+});
 </script>
 
 <template>
-  <main :style="style">
+  <main ref="domElement" :style="style">
     <slot></slot>
   </main>
 </template>

packages/@core/uikit/shadcn-ui/src/components/spinner/spinner.vue

@@ -20,7 +20,7 @@ defineOptions({
 const props = withDefaults(defineProps<Props>(), {
   minLoadingTime: 50,
 });
-const startTime = ref(0);
+// const startTime = ref(0);
 const showSpinner = ref(false);
 const renderSpinner = ref(true);
 const timer = ref<ReturnType<typeof setTimeout>>();
@@ -33,11 +33,12 @@ watch(
       clearTimeout(timer.value);
       return;
     }
-    startTime.value = performance.now();
-    timer.value = setTimeout(() => {
-      const loadingTime = performance.now() - startTime.value;
 
-      showSpinner.value = loadingTime > props.minLoadingTime;
+    // startTime.value = performance.now();
+    timer.value = setTimeout(() => {
+      // const loadingTime = performance.now() - startTime.value;
+
+      showSpinner.value = true;
       if (showSpinner.value) {
         renderSpinner.value = true;
       }
@@ -49,13 +50,14 @@ watch(
 );
 
 function onTransitionEnd() {
-  renderSpinner.value = false;
+  if (!showSpinner.value) {
+    renderSpinner.value = false;
+  }
 }
 </script>
 
 <template>
   <div
-    v-if="renderSpinner"
     :class="{
       'invisible opacity-0': !showSpinner,
     }"