changes

static/css/style.css

@@ -74,6 +74,10 @@ body {
     text-align: left;
 }
 
+.notesBar .loadingStuff {
+    border: none;
+}
+
 .notesBar .selected {
     background-color: #157efb !important;
     color: white
@@ -105,6 +109,10 @@ body {
     font-family: "Inter", sans-serif;
 }
 
+.noteBox:focus {
+    outline: none
+}
+
 .optionsCoverDiv {
     position: fixed;
     width: 100%;
@@ -145,9 +153,11 @@ body {
     border-radius: 99px;
     height: 7px;
 }
+
 .optionsDiv progress::-moz-progress-bar {
     background: #157efb;
 }
+
 .optionsDiv progresss::-webkit-progress-value {
     background: #157efb;
 }

static/js/main.js

@@ -26,6 +26,11 @@ let notesBar = document.getElementById("notesBar")
 let notesDiv = document.getElementById("notesDiv")
 let newNote = document.getElementById("newNote")
 let noteBox = document.getElementById("noteBox")
+let loadingStuff = document.getElementById("loadingStuff")
+
+for (let i = 0; i < 10; i++) {
+    notesDiv.appendChild(loadingStuff.cloneNode())
+}
 
 let selectedNote = 0
 let timer
@@ -212,6 +217,7 @@ function updateNotes() {
     })
         .then((response) => response)
         .then((response) => {
+            document.querySelectorAll(".loadingStuff").forEach((el) => el.remove());
             async function doStuff() {
                 document.querySelectorAll(".noteButton").forEach((el) => el.remove());
                 noteBox.readOnly = true

templates/app.html

@@ -19,8 +19,9 @@
     </div>
 
     <div id="notesBar" class="notesBar">
-        <button id="newNote" class="newNote"><img id="newNoteImage" src="/static/svg/add.svg">new note</button>
+        <button id="newNote" class="newNote"><img id="newNoteImage" draggable="false" src="/static/svg/add.svg">new note</button>
         <div id="notesDiv" class="notesDiv">
+            <button class="loadingStuff" id="loadingStuff"></button>
         </div>
     </div>