DefineAsyncComponent don't show loading state

196 Views Asked by At

I want to display a loadingComponent when component-loader is loading (10sec). This does not work, I didn't see the loadingComponent at all. What am I doing wrong? use Vue3


import Preloader from "../../components/core/preloader";
const ChartDeals = defineAsyncComponent({
      loadingComponent: Preloader,
      loader: () => import("./deals/chart-deals"),
      delay: 200,
      timeout: 120000,
    });

export default {
  components: {
    ChartDeals,
    
  },
}
In the template: <chart-deals class="graph"/>

Before that, there were attempts with watching the key (loadPage: false) and a condition:

<preloader v-if="!loadPage" class="loader"/>
<chart-deals v-if="loadPage" lass="graph"/>

The loader was displayed but the page hung. Аnd it didn't work when the page loaded, only when updated

0

There are 0 best solutions below