1 files changed, 82 insertions, 0 deletions

diff --git a/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
new file mode 100644
index 000000000..e541e3f3c
--- /dev/null
+++ b/src/client/views/newlightbox/components/SkeletonDoc/SkeletonDoc.scss
@@ -0,0 +1,82 @@
+@import '../../NewLightboxStyles.scss';
+
+.skeletonDoc-container {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 40px);
+  margin: 20px;
+  gap: 20px;
+
+  .header {
+    width: calc(100% - 20px);
+    height: 80px;
+    background: $gray-l2;
+    animation: skeleton-loading-l2 1s linear infinite alternate; 
+    display: grid;
+    grid-template-rows: 60% 40%;
+    padding: 10px;
+    grid-template-columns: auto auto auto auto;
+    border-radius: 20px;
+
+    .title {
+      grid-row: 1;
+      grid-column: 1 / 5;
+      display: flex;
+      width: fit-content;
+      height: 100%;
+      min-width: 500px;
+      font-size: $title-size;
+      animation: skeleton-loading-l3 1s linear infinite alternate;
+      border-radius: 20px;
+    }
+
+    .type {
+      display: flex;
+      padding: 3px 7px;
+      width: fit-content;
+      height: fit-content;
+      margin-top: 8px;
+      min-height: 15px;
+      min-width: 60px;
+      grid-row: 2;
+      grid-column: 1;
+      animation: skeleton-loading-l3 1s linear infinite alternate;
+      border-radius: 20px;
+    }
+
+    .buttons-container {
+      grid-row: 1 / 3;
+      grid-column: 5;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 10px;
+
+      .button {
+        width: 50px;
+        height: 50px;
+        border-radius: 100%;
+        animation: skeleton-loading-l3 1s linear infinite alternate;
+      }
+    }
+
+  }
+
+  .content {
+    width: 100%;
+    flex: 1;
+    -webkit-flex: 1; /* Chrome */
+    background: $gray-l2;
+    animation: skeleton-loading-l2 1s linear infinite alternate;
+    border-radius: 20px;
+  }
+
+    // &.dark {
+    //   background: $black;
+    // }
+  
+    // &.light,
+    // &.default {
+    //   background: $white;
+    // }
+}
\ No newline at end of file