fix: added loading screen to publish page

NFDI4Chem · Jan 1, 2024 · b201909 · b201909
1 parent a84a6e7
commit b201909
Showing 1 changed file with 28 additions and 1 deletion.
diff --git a/resources/js/Pages/Publish.vue b/resources/js/Pages/Publish.vue
@@ -40,6 +40,32 @@
             </div>
         </template>
         <div class="mb-10">
+            <div
+                v-if="publishForm.processing"
+                class="absolute w-full h-full text-center py-12 pt-24 bg-opacity-90 bg-white z-50"
+            >
+                <svg
+                    class="animate-spin -ml-1 mr-3 h-5 w-5 text-dark flex-inline inline"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <circle
+                        class="opacity-25"
+                        cx="12"
+                        cy="12"
+                        r="10"
+                        stroke="currentColor"
+                        stroke-width="4"
+                    ></circle>
+                    <path
+                        class="opacity-75"
+                        fill="currentColor"
+                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                    ></path>
+                </svg>
+                Saving...
+            </div>
             <div v-if="status == 'draft'">
                 <div id="project-details" class="p-4">
                     <div class="p-8">
@@ -521,7 +547,8 @@
                                 type="button"
                                 :class="[
                                     !publishForm.terms ||
-                                    !publishForm.conditions
+                                    !publishForm.conditions ||
+                                    publishForm.processing
                                         ? 'bg-gray-200 cursor-not-allowed'
                                         : 'bg-green-600 hover:bg-green-700',
                                     'inline-flex w-full justify-center rounded-md border border-transparent px-4 py-2 text-base font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:w-auto sm:text-sm',