[6.x] Defer image cache stats in the Cache Manager

composer.json

@@ -14,7 +14,7 @@
         "bacon/bacon-qr-code": "^3.0",
         "composer/semver": "^3.4",
         "guzzlehttp/guzzle": "^6.3 || ^7.0",
-        "inertiajs/inertia-laravel": "^2.0 || ^3.0",
+        "inertiajs/inertia-laravel": "^2.0.7 || ^3.0",
         "intervention/image": "^3.9.1 || ^4.0",
         "james-heinrich/getid3": "^1.9.21",
         "laravel/framework": "^12.40.0 || ^13.0",

resources/js/pages/utilities/Cache.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { router } from '@inertiajs/vue3';
+import { Deferred, router } from '@inertiajs/vue3';
 import Head from '@/pages/layout/Head.vue';
 import {
 	Header, Button, Panel, PanelHeader, Heading, Card, Description, Badge, DocsCallout, CommandPaletteItem,
-	Dropdown, DropdownMenu, DropdownItem, Textarea, ErrorMessage, Modal, ModalClose
+	Dropdown, DropdownMenu, DropdownItem, Textarea, ErrorMessage, Modal, ModalClose, Icon
 } from '@ui';
 import { ref } from 'vue';
 
@@ -217,8 +217,16 @@ function invalidateStaticUrls() {
                 <Card class="flex-1">
                     <Description>{{ __('statamic::messages.cache_utility_image_cache_description') }}</Description>
                     <div class="flex flex-wrap gap-2 mt-3">
-                        <Badge :prepend="__('Cached images')">{{ images.count }}</Badge>
-                        <Badge :prepend="__('Size')">{{ images.size }}</Badge>
+                        <Deferred data="images">
+                            <template #fallback>
+                                <div class="flex h-6 items-center gap-2 text-sm text-gray-500">
+                                    <Icon name="loading" class="size-4" />
+                                    {{ __('Loading') }}
+                                </div>
+                            </template>
+                            <Badge :prepend="__('Cached images')">{{ images.count }}</Badge>
+                            <Badge :prepend="__('Size')">{{ images.size }}</Badge>
+                        </Deferred>
                     </div>
                 </Card>
             </Panel>

src/Http/Controllers/CP/Utilities/CacheController.php

@@ -25,7 +25,7 @@ public function index()
             'stache' => $this->getStacheStats(),
             'cache' => $this->getApplicationCacheStats(),
             'static' => $this->getStaticCacheStats(),
-            'images' => $this->getImageCacheStats(),
+            'images' => Inertia::defer(fn () => $this->getImageCacheStats()),
             'clearAllUrl' => cp_route('utilities.cache.clear-all'),
             'clearStacheUrl' => cp_route('utilities.cache.clear-stache'),
             'warmStacheUrl' => cp_route('utilities.cache.warm-stache'),

tests/Feature/Utilities/CacheManagerTest.php

@@ -0,0 +1,41 @@
+<?php
+
+namespace Tests\Feature\Utilities;
+
+use Illuminate\Support\Facades\Storage;
+use Inertia\Testing\AssertableInertia;
+use PHPUnit\Framework\Attributes\Test;
+use Statamic\Facades\User;
+use Tests\PreventSavingStacheItemsToDisk;
+use Tests\TestCase;
+
+class CacheManagerTest extends TestCase
+{
+    use PreventSavingStacheItemsToDisk;
+
+    /**
+     * @see https://github.com/statamic/cms/issues/15623
+     */
+    #[Test]
+    public function it_defers_the_image_cache_stats()
+    {
+        config(['statamic.assets.image_manipulation.cache' => 'glide']);
+
+        Storage::fake('glide');
+        Storage::disk('glide')->put('containers/main/foo.jpg/abc.jpg', 'foo');
+        Storage::disk('glide')->put('containers/main/bar.jpg/def.jpg', 'barbaz');
+
+        $this
+            ->actingAs(tap(User::make()->makeSuper())->save())
+            ->get(cp_route('utilities.cache'))
+            ->assertOk()
+            ->assertInertia(fn (AssertableInertia $page) => $page
+                ->component('utilities/Cache')
+                ->missing('images')
+                ->loadDeferredProps(fn (AssertableInertia $reload) => $reload
+                    ->where('images.count', 2)
+                    ->where('images.size', '9 B')
+                )
+            );
+    }
+}