loader plugin

src/main.ts

@@ -1,7 +1,7 @@
 import { createApp, defineAsyncComponent } from "vue";
 import App from "./App.vue";
 import router from "./router";
-import { Dialog, Notify, Quasar } from "quasar";
+import { Dialog, Notify, Quasar, Loading } from "quasar";
 import quasarUserOptions from "./quasar-user-options";
 
 import "quasar/src/css/index.sass";
@@ -36,11 +36,15 @@ app.use(
     plugins: {
       Notify,
       Dialog,
+      Loading,
     }, // import Quasar plugins and add here
     config: {
       notify: {
         /* look at QuasarConfOptions from the API card */
       },
+      loading: {
+        /* look at QuasarConfOptions from the API card */
+      },
     },
     lang: th,
   }

src/stores/mixin.ts

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import moment from "moment";
 import CustomComponent from "@/components/CustomDialog.vue";
+import { Loading, QSpinnerCube } from "quasar";
 
 export const useCounterMixin = defineStore("mixin", () => {
   /**
@@ -408,6 +409,20 @@ export const useCounterMixin = defineStore("mixin", () => {
       });
   };
 
+  const showLoader = () => {
+    Loading.show({
+      spinner: QSpinnerCube,
+      spinnerSize: 140,
+      spinnerColor: "primary",
+      backgroundColor: "white",
+    });
+  };
+
+  const hideLoader = () => {
+    // q.loading.hide();
+    Loading.hide();
+  };
+
   function modalDelete(
     q: any,
     title: string,
@@ -615,5 +630,7 @@ export const useCounterMixin = defineStore("mixin", () => {
     modalError,
     dialogMessage,
     messageError,
+    showLoader,
+    hideLoader,
   };
 });