Pridani skeletonu

src/pages/profile/flight/PhotoEditorPage.vue

@@ -4,19 +4,20 @@ import {onMounted, ref, watch} from "vue";
 import {usePhotosStore} from "stores/Photo";
 import {useAppStore} from "stores/App";
 import {flightName} from "src/composables/objects/flight";
-import VuePictureCropper, {cropper} from 'vue-picture-cropper';
+import VuePictureCropper from 'vue-picture-cropper';
 import {croppedAreaForPreview, getPreviewUrl} from "src/composables/photos/editor/preview";
 import {compare, onResize, splitter, splitterWidth} from "src/composables/photos/editor/splitter";
 import {aspectRatioOptions, croppedArea, cropperReady, selectedAspectRatio, setCropData} from "src/composables/photos/editor/crop";
 import {fetchPhoto, loading, photo, photoAspectRatio} from "src/composables/photos/editor/photo";
-import {debounce, throttle, useQuasar} from "quasar";
+import {debounce, useQuasar} from "quasar";
 import {successObject} from "src/composables/dialog";
+import PhotoEditorSkeleton from "components/photos/PhotoEditorSkeleton.vue";
 
 const $route = useRoute();
 const $q = useQuasar();
 const photoId = parseInt($route.params.id);
 const noCacheTimestamp = ref((new Date()).getTime());
-const editorTab = ref("rotate");
+const editorTab = ref("colors");
 
 // adjustments
 const defaultAdjustments = {
@@ -61,7 +62,6 @@ onMounted(() => {
       }
 
       if (photoAdjustment) {
-        rotate.value = photoAdjustment.rotate;
         croppedArea.value = {
           left: photoAdjustment.cropLeft,
           top: photoAdjustment.cropTop,
@@ -85,7 +85,7 @@ onMounted(() => {
 <template>
   <q-resize-observer @resize="onResize" :debounce="100"/>
 
-  <template v-if="loading">Nacitani</template>
+  <PhotoEditorSkeleton v-if="loading" />
 
   <template v-if="!loading">
     <q-card :style="`width: ${splitterWidth}px; margin: 0 auto`">
@@ -145,8 +145,7 @@ onMounted(() => {
           </template>
         </q-splitter>
 
-        <div class="text-right q-pt-md q-pr-md">
-
+        <div class="text-right q-pt-sm q-pr-sm">
           <q-btn flat icon="compare" @click="compare = !compare" :text-color="compare ? 'primary' : 'grey-5'">
             <q-tooltip>Klikni pro porovnání</q-tooltip>
           </q-btn>
@@ -158,7 +157,7 @@ onMounted(() => {
         <q-tabs v-model="editorTab">
           <q-tab name="colors" icon="palette" label="Barvy"/>
           <q-tab name="details" icon="deblur" label="Detialy"/>
-          <q-tab name="rotate" icon="rotate" label="Otočit"/>
+          <q-tab name="rotate" icon="loop" label="Otočit"/>
           <q-tab name="crop" icon="crop" label="Oříznout"/>
         </q-tabs>
         <q-separator/>