add loader in open n save btn

src/db.js

@@ -120,7 +120,7 @@
 
 	// Fetch user settings.
 	// This isn't hitting the remote db because remote settings
-	// get fetch asynchronously (in user/ call) and update the envioronment.
+	// get fetch asynchronously (in user/) and update the envioronment.
 	function getSettings(defaultSettings) {
 		const d = deferred();
 		// Will be chrome.storage.sync in extension environment,

src/index.html

@@ -82,11 +82,20 @@
 					<a id="saveBtn" class="flex  flex-v-center hint--rounded hint--bottom-left" aria-label="Save current creation (Ctrl/⌘ + S)" d-click="onSaveBtnClick">
 						<svg style="vertical-align:middle;width:14px;height:14px" viewBox="0 0 24 24">
     						<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
-						</svg>Save</a>
+						</svg>
-					<a class="flex  flex-v-center hint--rounded hint--bottom-left" aria-label="Open a saved creation (Ctrl/⌘ + O)" d-click="onOpenBtnClick">
+						<svg class="btn-loader" width="15" height="15" stroke="#fff">
+							<use xlink:href="#loader-icon"></use>
+						</svg>
+						Save
+					</a>
+					<a id="openItemsBtn" class="flex  flex-v-center hint--rounded hint--bottom-left" aria-label="Open a saved creation (Ctrl/⌘ + O)" d-click="onOpenBtnClick">
 						<svg style="width:14px;height:14px;vertical-align:middle;" viewBox="0 0 24 24">
 						    <path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
-						</svg>Open
+						</svg>
+						<svg class="btn-loader" width="15" height="15" stroke="#fff">
+							<use xlink:href="#loader-icon"></use>
+						</svg>
+						Open
 					</a>
 					<a d-open-modal="loginModal" data-event-category="ui" data-event-action="loginButtonClick" class="show-when-app hide-on-login flex  flex-v-center  hint--rounded  hint--bottom-left" aria-label="Login/Signup">
 						Login/Signup
@@ -589,6 +598,43 @@
 			<symbol id="keyboard-icon" viewBox="0 0 24 24">
 				<path d="M19,10H17V8H19M19,13H17V11H19M16,10H14V8H16M16,13H14V11H16M16,17H8V15H16M7,10H5V8H7M7,13H5V11H7M8,11H10V13H8M8,8H10V10H8M11,11H13V13H11M11,8H13V10H11M20,5H4C2.89,5 2,5.89 2,7V17A2,2 0 0,0 4,19H20A2,2 0 0,0 22,17V7C22,5.89 21.1,5 20,5Z" />
 			</symbol>
+			<symbol id="loader-icon" viewBox="0 0 44 44">
+				<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+				<g fill="none" fill-rule="evenodd" stroke-width="10">
+					<circle cx="22" cy="22" r="1">
+						<animate attributeName="r"
+							begin="0s" dur="1.8s"
+							values="1; 20"
+							calcMode="spline"
+							keyTimes="0; 1"
+							keySplines="0.165, 0.84, 0.44, 1"
+							repeatCount="indefinite" />
+						<animate attributeName="stroke-opacity"
+							begin="0s" dur="1.8s"
+							values="1; 0"
+							calcMode="spline"
+							keyTimes="0; 1"
+							keySplines="0.3, 0.61, 0.355, 1"
+							repeatCount="indefinite" />
+					</circle>
+					<circle cx="22" cy="22" r="1">
+						<animate attributeName="r"
+							begin="-0.9s" dur="1.8s"
+							values="1; 20"
+							calcMode="spline"
+							keyTimes="0; 1"
+							keySplines="0.165, 0.84, 0.44, 1"
+							repeatCount="indefinite" />
+						<animate attributeName="stroke-opacity"
+							begin="-0.9s" dur="1.8s"
+							values="1; 0"
+							calcMode="spline"
+							keyTimes="0; 1"
+							keySplines="0.3, 0.61, 0.355, 1"
+							repeatCount="indefinite" />
+					</circle>
+				</g>
+			</symbol>
 		</svg>
 
 		<!-- build:js vendor.js -->

src/script.js

@@ -8,7 +8,7 @@ onboardDontShowInTabOptionBtn, TextareaAutoComplete, savedItemCountEl, indentati
 runBtn, searchInput, consoleEl, consoleLogEl, logCountEl, fontStyleTag, fontStyleTemplate,
 customEditorFontInput, cssSettingsModal, cssSettingsBtn, acssSettingsTextarea,
 globalConsoleContainerEl, externalLibrarySearchInput, keyboardShortcutsModal, headerAvatarImg,
-loginModal, profileModal, profileAvatarImg, profileUserName
+loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn
 */
 /* eslint-disable no-extra-semi */
 (function(alertsService, itemService) {
@@ -336,7 +336,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName
 	function saveItem() {
 		var isNewItem = !currentItem.id;
 		currentItem.id = currentItem.id || 'item-' + utils.generateRandomId();
+		saveBtn.classList.add('is-loading');
 		saveCode().then(() => {
+			saveBtn.classList.remove('is-loading');
 			// If this is the first save, and auto-saving settings is enabled,
 			// then start auto-saving from now on.
 			// This is done in `saveCode()` completion so that the
@@ -537,7 +539,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName
 	}
 
 	function openSavedItemsPane() {
+		openItemsBtn.classList.add('is-loading');
 		fetchItems(true).then(function(items) {
+			openItemsBtn.classList.remove('is-loading');
 			populateItemsInSavedPane(items);
 		});
 	}

src/style.css

@@ -160,6 +160,15 @@ textarea {
 	height: 25px;
 	margin-right: 12px;
 }
+.btn-loader {
+	display: none;
+}
+.is-loading > svg {
+	display:none;
+}
+.is-loading .btn-loader {
+	display: block;
+}
 .star:after {
 	content: '★';
 	color: #eee333;
@@ -423,6 +432,10 @@ body > #demo-frame {
 .main-header__btn-wrap > a:hover {
 	border-color: rgba(146, 151, 179, 0.5);
 }
+.main-header__btn-wrap > a.is-loading {
+	pointer-events: none;
+	opacity: 0.4;
+}
 .main-header__avatar-img,
 .profile-modal__avatar-img {
 	border-radius: 50%;