Skip to content

[6.x] Delay bulk actions until ready #13450

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jasonvarga merged 5 commits into from
Jan 25, 2026
Merged

[6.x] Delay bulk actions until ready #13450

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
81b211c
Check for actions to be ready before showing the floating toolbar. Th…
JayGeorge Jan 7, 2026
d4de321
Merge branch 'master' into delay-bulk-actions-until-ready
JayGeorge Jan 24, 2026
306b384
Remove bulk actions delay, this will not be needed after #13450
JayGeorge Jan 24, 2026
2c3091c
rather than completely waiting, show a loading spinner
jasonvarga Jan 25, 2026
533ef56
add a small delay when showing the bar so you dont see a flash of the…
jasonvarga Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion resources/js/components/actions/BulkActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const emit = defineEmits(['started', 'completed']);
const { prepareActions, runServerAction } = useActions();

let actions = ref([]);
let loading = ref(false);

const confirmableActions = useTemplateRef('confirmableActions');

Expand Down Expand Up @@ -49,6 +50,8 @@ function getActions() {
return;
}

loading.value = true;

let params = {
selections: toRaw(props.selections),
};
Expand All @@ -59,7 +62,10 @@ function getActions() {

axios
.post(props.url + '/list', params)
.then(response => actions.value = response.data);
.then(response => {
actions.value = response.data;
loading.value = false;
});
}

let errors = ref({});
Expand Down Expand Up @@ -91,5 +97,6 @@ function runAction(action, values, onSuccess, onError) {
<slot
v-if="showAlways || hasSelections"
:actions="preparedActions"
:loading="loading"
/>
</template>
20 changes: 16 additions & 4 deletions resources/js/components/ui/Listing/BulkActions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,23 @@
import { Motion } from 'motion-v';
import { injectListingContext } from '../Listing/Listing.vue';
import { computed, ref, watch } from 'vue';
import { Button, ButtonGroup } from '@ui';
import { Button, ButtonGroup, Icon } from '@ui';
import BulkActions from '@/components/actions/BulkActions.vue';

const { actionUrl, actionContext, selections, refresh, clearSelections } = injectListingContext();
const busy = ref(false);
const hasSelections = computed(() => selections.value.length > 0);
const visible = ref(false);
let visibleTimeout = null;

watch(hasSelections, (value) => {
clearTimeout(visibleTimeout);
if (value) {
visibleTimeout = setTimeout(() => visible.value = true, 300);
} else {
visible.value = false;
}
});

watch(busy, (busy) => Statamic.$progress.loading('action', busy));

Expand Down Expand Up @@ -40,21 +51,22 @@ function actionFailed(response) {
:context="actionContext"
@started="actionStarted"
@completed="actionCompleted"
v-slot="{ actions }"
v-slot="{ actions, loading }"
>
<Motion
v-if="hasSelections"
v-if="visible"
layout
data-floating-toolbar
class="sticky inset-x-0 bottom-1 sm:bottom-6 z-100 flex w-full max-w-[95vw] mx-auto justify-center "
:initial="{ y: 100, opacity: 0 }"
:animate="{ y: 0, opacity: 1 }"
:transition="{ duration: 0.2, delay: 0.075, ease: 'easeInOut' }"
:transition="{ duration: 0.2, ease: 'easeInOut' }"
>
<div class="space-y-3 rounded-xl border border-gray-300/60 dark:border-gray-700 p-1 bg-gray-200/55 backdrop-blur-[20px] shadow-[0_1px_16px_-2px_rgba(63,63,71,0.2)] dark:bg-gray-800 dark:shadow-[0_10px_15px_rgba(0,0,0,.5)] dark:inset-shadow-2xs dark:inset-shadow-white/10">
<ButtonGroup>
<Button
class="text-blue-500!"
:icon-append="loading ? 'loading' : null"
:text="__n(`Deselect :count item|Deselect all :count items`, selections.length)"
@click="clearSelections"
/>
Expand Down