loading status and fixes

app/Http/Controllers/Api/MediaController.php

@@ -87,7 +87,7 @@ class MediaController extends ApiController
             'name' => $file->getClientOriginalName(),
             'size' => $file->getSize(),
             'mime_type' => $file->getMimeType(),
-            'status' => 'Creating Media',
+            'status' => 'Processing Media',
         ]);
 
         // We store images by default locally

resources/js/components/SMLoading.vue

@@ -1,10 +1,17 @@
 <template>
-    <div class="flex flex-items-center justify-center">
+    <div class="flex flex-col flex-items-center justify-center">
         <div :class="['spinner', { small: props.small }]"></div>
+        <div v-if="slots.default" :class="['mt-3', { small: props.small }]">
+            <slot name="default"></slot>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
+import { useSlots } from "vue";
+
+const slots = useSlots();
+
 const props = defineProps({
     small: {
         type: Boolean,

resources/js/components/dialogs/SMDialogMedia.vue

@@ -140,13 +140,16 @@
                                                 { 'mb-6': showMediaName(item) },
                                             ]"
                                             :style="{
-                                                backgroundImage: `url('${mediaGetThumbnail(
-                                                    item,
-                                                    null,
-                                                    itemRequiresRefresh(
-                                                        item.id,
-                                                    ),
-                                                )}')`,
+                                                backgroundImage:
+                                                    item.status === 'OK'
+                                                        ? `url('${mediaGetThumbnail(
+                                                              item,
+                                                              null,
+                                                              itemRequiresRefresh(
+                                                                  item.id,
+                                                              ),
+                                                          )}')`
+                                                        : 'initial',
                                                 backgroundColor:
                                                     item.status === 'OK'
                                                         ? 'initial'
@@ -165,7 +168,16 @@
                                                     ) === false
                                                 "
                                                 small
-                                                class="bg-white bg-op-90 w-full h-full" />
+                                                class="bg-white bg-op-90 w-full h-full"
+                                                >{{
+                                                    item.status.split(":")
+                                                        .length > 1
+                                                        ? item.status
+                                                              .split(":")[1]
+                                                              .trim()
+                                                        : item.status
+                                                }}</SMLoading
+                                            >
                                             <div
                                                 v-if="
                                                     item.status.startsWith(
@@ -947,6 +959,8 @@ const updateFiles = async () => {
                         if (updateResult.data) {
                             const updateData =
                                 updateResult.data as MediaResponse;
+                            mediaItems.value[index].status =
+                                updateData.medium.status;
                             if (updateData.medium.status == "OK") {
                                 mediaItems.value[index] = updateData.medium;
                                 forceRefresh.push(updateData.medium.id);
@@ -996,7 +1010,7 @@ const updateFiles = async () => {
             updateFilesNonce.value = setTimeout(() => {
                 updateFilesNonce.value = null;
                 updateFiles();
-            }, 2000);
+            }, 1000);
         } else {
             updateFilesNonce.value = null;
         }