🧰🎛️: move spinner into components

lively.components/loading-indicator.cp.js

@@ -1,8 +1,34 @@
-import { ShadowObject, TilingLayout, easings, stringToEasing, Morph, Icon, Label, component, ViewModel, part } from 'lively.morphic';
+import { ShadowObject, HTMLMorph, TilingLayout, easings, stringToEasing, Morph, Icon, Label, component, ViewModel, part } from 'lively.morphic';
 import { Color, Rectangle, rect, pt } from 'lively.graphics';
 import { promise, num } from 'lively.lang';
 import { ButtonDefault } from './buttons.cp.js';
-import { Spinner } from 'lively.ide/studio/shared.cp.js';
+
+class SpinnerModel extends ViewModel {
+  static get properties () {
+    return {
+      color: {
+        defaultValue: 'white',
+        type: 'Enum',
+        values: ['white', 'black']
+      }
+    };
+  }
+
+  viewDidLoad () {
+    const node = this.view.domNode.querySelector('.spinner');
+    if (this.color === 'black') node.classList.add('black-spinner');
+  }
+}
+
+export const Spinner = component({
+  type: HTMLMorph,
+  defaultViewModel: SpinnerModel,
+  name: 'spinner',
+  extent: pt(86.2, 70.2),
+  fill: Color.rgba(255, 255, 255, 0),
+  html: '<div class="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>',
+  scale: 0.3244543390629232
+});
 
 class ProgressBar extends Morph {
   static get properties () {

lively.ide/studio/shared.cp.js

@@ -5,6 +5,7 @@ import { Color, Rectangle, pt, rect } from 'lively.graphics';
 import { DarkNumberWidget, NumberWidgetModel } from '../value-widgets.cp.js';
 import { CloseButton, PopupWindow, CloseButtonHovered } from '../styling/shared.cp.js';
 import { InputLine } from 'lively.components/inputs.js';
+import { Spinner } from 'lively.components/loading-indicator.cp.js';
 
 const DarkThemeList = component(DarkList, {
   name: 'sidebar list',
@@ -258,32 +259,4 @@ const DarkFlap = component(DarkPopupWindow, {
   ]
 });
 
-class SpinnerModel extends ViewModel {
-  static get properties () {
-    return {
-      color: {
-        defaultValue: 'white',
-        type: 'Enum',
-        values: ['white', 'black']
-      }
-    };
-  }
-
-  viewDidLoad () {
-    const node = this.view.domNode.querySelector('.spinner');
-    if (this.color === 'black') node.classList.add('black-spinner');
-  }
-}
-
-// part(Spinner, {viewModel: { color: 'black'}}).openInWorld();
-const Spinner = component({
-  type: HTMLMorph,
-  defaultViewModel: SpinnerModel,
-  name: 'spinner',
-  extent: pt(86.2, 70.2),
-  fill: Color.rgba(255, 255, 255, 0),
-  html: '<div class="spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>',
-  scale: 0.3244543390629232
-});
-
 export { AddButton, RemoveButton, HeadlineLabel, PropLabel, DarkNumberIconWidget, TextInput, EnumSelector, PropertyLabel, PropertyLabelLight, PropertyLabelHovered, PropertyLabelHoveredLight, PropertyLabelActive, PropertyLabelActiveLight, DarkThemeList, DarkFlap, DarkPopupWindow, DarkCloseButton, DarkCloseButtonHovered, BoundsContainerInactive, BoundsContainerHovered, Spinner };

lively.project/prompts.cp.js

@@ -14,7 +14,7 @@ import { Checkbox, LabeledCheckboxLight } from 'lively.components';
 import { currentUserToken, isUserLoggedIn, currentUsersOrganizations, currentUsername } from 'lively.user';
 import { Project } from 'lively.project';
 import { StatusMessageError, StatusMessageConfirm } from 'lively.halos/components/messages.cp.js';
-import { EnumSelector, Spinner } from 'lively.ide/studio/shared.cp.js';
+import { EnumSelector } from 'lively.ide/studio/shared.cp.js';
 import { SystemList } from 'lively.ide/styling/shared.cp.js';
 import { SystemButton, SystemButtonDark } from 'lively.components/buttons.cp.js';
 import { VersionChecker } from 'lively.ide/studio/version-checker.cp.js';
@@ -25,6 +25,7 @@ import { repositoryOwnerAndNameRegex } from './project.js';
 import { debounceNamed } from 'lively.lang/function.js';
 import { GitHubAPIWrapper } from 'lively.git';
 import { Text } from 'lively.morphic/text/morph.js';
+import { Spinner } from 'lively.components/loading-indicator.cp.js';
 
 class ProjectSettingsPromptModel extends AbstractPromptModel {
   static get properties () {

lively.user/user-flap.cp.js

@@ -6,14 +6,14 @@ import { signal } from 'lively.bindings';
 import { runCommand } from 'lively.ide/shell/shell-interface.js';
 import { StatusMessageError } from 'lively.halos/components/messages.cp.js';
 import { part } from 'lively.morphic/components/core.js';
-import { Spinner } from 'lively.ide/studio/shared.cp.js';
 import { rect } from 'lively.graphics/geometry-2d.js';
 import { waitFor, delay, timeToRun } from 'lively.lang/promise.js';
 import { DarkPrompt, ConfirmPrompt } from 'lively.components/prompts.cp.js';
 import { SystemButton } from 'lively.components/buttons.cp.js';
 import { promise } from 'lively.lang';
 import { guardNamed } from 'lively.lang/function.js';
 import L2LClient from 'lively.2lively/client.js';
+import { Spinner } from 'lively.components/loading-indicator.cp.js';
 
 const livelyAuthGithubAppId = 'd523a69022b9ef6be515';
 
@@ -66,7 +66,7 @@ export class UserFlapModel extends ViewModel {
       },
       expose: {
         get () {
-          return ['setupComplete','updateNetworkIndicator', 'showUserData', 'onLogin', 'onLogout', 'showLoggedInUser', 'showGuestUser', 'toggleLoadingAnimation', 'login', 'update'];
+          return ['setupComplete', 'updateNetworkIndicator', 'showUserData', 'onLogin', 'onLogout', 'showLoggedInUser', 'showGuestUser', 'toggleLoadingAnimation', 'login', 'update'];
         }
       }
     };
@@ -258,8 +258,8 @@ export class UserFlapModel extends ViewModel {
       }
     });
     const userData = await userRes.json();
-    // provided token is not valid, purge all data and reset login status throughout user flap 
-    if (userData.status === '401'){
+    // provided token is not valid, purge all data and reset login status throughout user flap
+    if (userData.status === '401') {
       this.logout();
       return false;
     }