[6.x] Add skeleton ui to lazy loaded actions (#14217)

Author: jaygeorge

resources/js/components/actions/ItemActions.vue

@@ -2,6 +2,7 @@
 import { ref, computed, useTemplateRef, watch } from 'vue';
 import useActions from './Actions.js';
 import ConfirmableAction from './ConfirmableAction.vue';
+import useSkeletonDelay from '@/composables/skeleton-delay.js';
 import axios from 'axios';
 
 const props = defineProps({
@@ -19,11 +20,17 @@ const { prepareActions, runServerAction } = useActions();
 const confirmableActions = useTemplateRef('confirmableActions');
 const actions = ref(props.actions);
 const actionsLoaded = ref(props.actions !== undefined);
+const loading = ref(false);
+const shouldShowSkeleton = useSkeletonDelay(loading);
+let loadActionsRequest = null;
 
 watch(
-	() => props.actions,
-	() => actions.value = props.actions,
-	{ deep: true }
+    () => props.actions,
+    () => {
+        actions.value = props.actions;
+        actionsLoaded.value = props.actions !== undefined;
+    },
+    { deep: true }
 );
 
 let preparedActions = computed(() => {
@@ -52,7 +59,11 @@ function runAction(action, values, onSuccess, onError) {
 
 function loadActions() {
     if (actionsLoaded.value) {
-        return;
+        return Promise.resolve(actions.value);
+    }
+
+    if (loading.value) {
+        return loadActionsRequest;
     }
 
     let params = {
@@ -63,9 +74,22 @@ function loadActions() {
         params.context = props.context;
     }
 
-    axios.post(props.url + '/list', params).then((response) => (actions.value = response.data));
+    loading.value = true;
 
-    actionsLoaded.value = true;
+    loadActionsRequest = axios
+        .post(props.url + '/list', params)
+        .then((response) => {
+            actions.value = response.data;
+            actionsLoaded.value = true;
+
+            return response.data;
+        })
+        .finally(() => {
+            loading.value = false;
+            loadActionsRequest = null;
+        });
+
+    return loadActionsRequest;
 }
 
 defineExpose({
@@ -84,5 +108,10 @@ defineExpose({
         :is-dirty="isDirty"
         @confirmed="runAction"
     />
-    <slot :actions="preparedActions" :load-actions="loadActions" />
+    <slot
+        :actions="preparedActions"
+        :load-actions="loadActions"
+        :loading="loading"
+        :should-show-skeleton="shouldShowSkeleton"
+    />
 </template>

resources/js/components/ui/Listing/RowActions.vue

@@ -4,6 +4,7 @@ import {
     DropdownItem,
     DropdownMenu,
     DropdownSeparator,
+    Skeleton,
 } from '@ui';
 import { injectListingContext } from '../Listing/Listing.vue';
 import ItemActions from '@/components/actions/ItemActions.vue';
@@ -64,20 +65,37 @@ function dropdownHovered(loadActions) {
         :actions="row.actions"
         @started="actionStarted"
         @completed="actionCompleted"
-        v-slot="{ actions, loadActions }"
+        v-slot="{ actions, loadActions, shouldShowSkeleton }"
     >
-        <Dropdown @mouseover="dropdownHovered(loadActions)" placement="left-start" class="me-3">
+        <Dropdown
+            @mouseover="dropdownHovered(loadActions)"
+            @focus="dropdownHovered(loadActions)"
+            @click="dropdownHovered(loadActions)"
+            placement="left-start"
+            class="me-3"
+        >
             <DropdownMenu>
                 <slot name="prepended-actions" :row="row" />
-                <DropdownSeparator v-if="$slots['prepended-actions'] && actions.length" />
-                <DropdownItem
-                    v-for="action in actions"
-                    :key="action.handle"
-                    :text="__(action.title)"
-                    :icon="action.icon"
-                    :variant="action.dangerous ? 'destructive' : 'default'"
-                    @click="action.run"
-                />
+                <DropdownSeparator v-if="hasPrependedActionsContent && (shouldShowSkeleton || actions.length)" />
+                <template v-if="shouldShowSkeleton">
+                    <div v-for="index in 3" :key="index" class="contents">
+                        <Skeleton class="m-1 size-5" />
+                        <Skeleton
+                            class="mx-2 my-1.5 h-5"
+                            :class="index === 1 ? 'w-28' : index === 2 ? 'w-36' : 'w-24'"
+                        />
+                    </div>
+                </template>
+                <template v-else>
+                    <DropdownItem
+                        v-for="action in actions"
+                        :key="action.handle"
+                        :text="__(action.title)"
+                        :icon="action.icon"
+                        :variant="action.dangerous ? 'destructive' : 'default'"
+                        @click="action.run"
+                    />
+                </template>
             </DropdownMenu>
         </Dropdown>
     </ItemActions>

resources/js/composables/skeleton-delay.js

@@ -2,15 +2,20 @@ import { ref, watch } from 'vue';
 
 export default function useSkeletonDelay(isLoading, delay = 400) {
     const shouldShowSkeleton = ref(false);
-
-    const timer = setTimeout(() => shouldShowSkeleton.value = isLoading.value, delay);
+    let timer = null;
 
     watch(isLoading, (loading) => {
-        if (!loading) {
-            clearTimeout(timer);
-            shouldShowSkeleton.value = false;
+        clearTimeout(timer);
+
+        if (loading) {
+            timer = setTimeout(() => {
+                shouldShowSkeleton.value = true;
+            }, delay);
+            return;
         }
-    });
+
+        shouldShowSkeleton.value = false;
+    }, { immediate: true });
 
     return shouldShowSkeleton;
 }