@antify/ui-module 1.9.0 → 1.9.1

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "configKey": "uiModule",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/runtime/composables/useUiClient.d.ts

@@ -12,6 +12,16 @@ declare function isFormDisabled(status: Ref | Ref[]): boolean;
  * Detect if the given queryToWatch changed.
  */
 declare function queryChanged(from: LocationQuery, to: LocationQuery, queryToWatch: string | string[]): boolean;
+/**
+ * Creates a skeleton ref with flicker protection by prevent switching to fast from true to false.
+ *
+ * Important, it only watches the pending ref once, because a skeleton should be shown only one time
+ * on initial loading.
+ *
+ * @param pending
+ * @deprecated - Flicker protection is implemented in @antify/ui directly. Do not handle it from outside anymore.
+ */
+declare function createSkeleton(pending: Ref<boolean>): Ref<boolean>;
 export type CrudRoutingOptions = {
     detailRouteName: string;
     listingRouteName: string;
@@ -74,6 +84,7 @@ export declare const useUiClient: () => {
             goToDetailSubPage(subRouteNameExtension: string, query?: LocationQueryRaw): Promise<void | import("vue-router").NavigationFailure | undefined>;
         };
         useFormField: typeof useFormField;
+        createSkeleton: typeof createSkeleton;
     };
 };
 export {};

package/dist/runtime/composables/useUiClient.js

@@ -5,9 +5,11 @@ import {
   useRouter,
   useRoute,
   computed,
-  reactive
+  reactive,
+  ref
 } from "#imports";
 import { InputState } from "@antify/ui";
+import { watchOnce } from "@vueuse/core";
 async function handleNotFoundResponse(response, fallbackUrl) {
   if (response._data?.notFound) {
     useNuxtApp().$uiModule.toaster.toastError("Entity not found. Maybe an other user deleted it.");
@@ -35,6 +37,23 @@ function queryChanged(from, to, queryToWatch) {
   }, {});
   return _queryToWatch.some((key) => changes[key] !== void 0);
 }
+function createSkeleton(pending) {
+  const skeleton = ref(true);
+  const initialTimestamp = Date.now();
+  const minShowTime = 500;
+  watchOnce(pending, () => {
+    const timeShowed = Date.now() - (initialTimestamp || Date.now());
+    const restTimeToShow = minShowTime - timeShowed > 0 ? minShowTime - timeShowed : 0;
+    if (restTimeToShow === 0) {
+      skeleton.value = false;
+    } else {
+      setTimeout(() => {
+        skeleton.value = false;
+      }, restTimeToShow);
+    }
+  });
+  return skeleton;
+}
 const useCrudRouting = (detailRouteName, listingRouteName, getDetailRouteParams = () => ({}), getListingRouteParams = () => ({}), entityIdentifier = "entityId", createEntityIdentifier = "create") => {
   const route = useRoute();
   const router = useRouter();
@@ -125,7 +144,8 @@ export const useUiClient = () => {
       isFormDisabled,
       queryChanged,
       useCrudRouting,
-      useFormField
+      useFormField,
+      createSkeleton
     }
   };
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",