Replace loading GIFs

css/10_colors.css

@@ -28,10 +28,6 @@
     --dark-tooltip-text-color: #fff;
     --dark-tooltip-bg-color: #444;
 
-    --bg-filter: none;
-    --mix-blend-mode: normal;
-    --bg-blend-mode: normal;
-
     --valid-bg-color: #cfc;
     --valid-label-color: #afa;
     --valid-highlight-color: #8f8;
@@ -95,10 +91,6 @@
         --dark-tooltip-text-color: #ccc;
         --dark-tooltip-bg-color: #000;
 
-        --bg-filter: invert();
-        --mix-blend-mode: screen;
-        --bg-blend-mode: difference;
-
         --valid-bg-color: #030;
         --valid-label-color: #050;
         --valid-highlight-color: #060;

css/60_photos.css

@@ -102,6 +102,14 @@ li.list-item-photos.active:after {
     overflow: hidden;
 }
 
+.photo-wrapper .photo-spinner {
+    position: absolute;
+    inset: 0;
+    width: 40px;
+    place-self: center;
+    stroke: #333;
+}
+
 .photo-wrapper .photo-attribution {
     position: absolute;
     bottom: 0;
@@ -328,13 +336,6 @@ li.list-item-photos.list-item-mapilio.active:after {
     padding:0 6px;
     pointer-events: initial;
 }
-.ideditor .mapilio-wrapper {
-    position: relative;
-    background-color: #000;
-    background-image: url(img/loader-black.gif);
-    background-position: center;
-    background-repeat: no-repeat;
-}
 #ideditor-viewer-mapilio-simple-wrap {
     height: 100%;
 }
@@ -506,14 +507,6 @@ label.streetside-hires {
 }
 
 /* KartaView viewer */
-.kartaview-wrapper {
-    position: relative;
-    background-color: #000;
-    background-image: url(img/loader-black.gif);
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
 .kartaview-wrapper img {
     width: 100%;
     height: 100%;
@@ -549,12 +542,6 @@ label.streetside-hires {
 .photo-wrapper {
     position: relative;
     background-color: #000;
-    background-position: center;
-    background-repeat: no-repeat;
-}
-
-.photo-wrapper.show-loader {
-    background-image: url(img/loader-black.gif);
 }
 
 .photoviewer .plane-frame {
@@ -695,15 +682,10 @@ label.streetside-hires {
     display: block;
     color: red;
 }
-.list-local-photos .placeholder div {
-    display: block;
+.list-local-photos .placeholder svg {
     height: 40px;
     width: 40px;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-image: url(img/loader-black.gif);
-    filter: invert(1);
+    stroke: var(--border-color);
 }
 .local-photos label.button {
     background: var(--link-color);

css/80_app.css

@@ -328,12 +328,15 @@ li.hide {
 .content {
     box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.25);
 }
-.loading.loading {
-    background-color: #aaa;
-    background-blend-mode: var(--bg-blend-mode);
-    background-image: url(img/loader_bg.gif);
+.loading {
+    animation: load-crawl linear infinite 1s;
+    background-image: repeating-linear-gradient(45deg, var(--border-color) 0 15%, #0000 15% 50%);
     background-size: 5px 5px;
 }
+@keyframes load-crawl {
+    0% { background-position: 0px; }
+    to { background-position: 5px; }
+}
 
 
 /* Buttons
@@ -515,12 +518,6 @@ button.disabled .icon.operation use,
     vertical-align: baseline;
 }
 
-button.loading .icon {
-    background-image: url(img/mini-loader.gif);
-    background-position: 0 0;
-    background-size: auto;
-}
-
 
 /* Toolbar / Persistent UI Elements
 ------------------------------------------------------- */
@@ -667,10 +664,10 @@ button.add-note.disabled svg.icon {
     width: 20px;
     pointer-events: none;
 }
-.spinner img {
+.spinner svg {
     height: 100%;
     width: 100%;
-    background: transparent;
+    background: #0005;
     border-radius: 100%;
 }
 .ideditor[dir='rtl'] .spinner img {
@@ -2901,14 +2898,6 @@ button.raw-tag-option svg.icon {
 }
 
 /* Tag reference */
-.tag-reference-loading {
-    background-color: var(--bg-color-2);
-}
-.tag-reference-loading .icon {
-    background-image: url(img/mini-loader.gif);
-    background-position: 0 0;
-}
-
 .tag-reference-body {
     flex: 1 1 auto;
     width: 100%;
@@ -5220,10 +5209,11 @@ img.tile-debug {
     overflow-y: auto;
 }
 
-.modal .loader {
+.modal .spinner {
     margin-bottom: 10px;
-    filter: var(--bg-filter);
-    mix-blend-mode: var(--mix-blend-mode);
+    height: 40px;
+    width: 100%;
+    stroke: var(--border-color);
 }
 .modal .description {
     text-align: center;

modules/core/history.ts

@@ -643,7 +643,7 @@ export class coreHistory extends EventDispatcher<EventMap> {
                             loadComplete = false;
                             this.context.map().redrawEnable(false);
 
-                            var loading = uiLoading(this.context).blocking(true);
+                            var loading = uiLoading().blocking(true);
                             this.context.container().call(loading);
 
                             var childNodesLoaded = (err: Error, result: { data: OsmEntity[] }) => {

modules/operations/split.ts

@@ -83,7 +83,7 @@ export const operationSplit: CreateOperation = (context, selectedIDs) => {
             if (!confirmed) return; // user cancelled the operation
 
 
-            const loading = uiLoading(context).blocking(true);
+            const loading = uiLoading().blocking(true);
             context.container().call(loading);
 
             const requiredWayIds = new Set<EntityId>();

modules/services/kartaview.ts

@@ -308,6 +308,12 @@ export default new class Kartaview implements IStreetSide {
             .call(imgZoom.on('zoom', zoomPan))
             .on('dblclick.zoom', null);
 
+        wrapEnter
+            .append('svg')
+            .attr('class', 'photo-spinner')
+            .append('use')
+            .attr('href', '#iD-spinner');
+
         wrapEnter
             .append('div')
             .attr('class', 'photo-attribution fillD');

modules/services/mapilio.js

@@ -332,6 +332,7 @@ export default {
         if (!d) return this;
 
         let wrap = context.container().select('.photoviewer .mapilio-wrapper');
+        wrap.append('svg').attr('class', 'photo-spinner').append('use').attr('href', '#iD-spinner');
         let attribution = wrap.selectAll('.photo-attribution').text('\u00A0');
 
         let _username = '';

modules/services/plane_photo.ts

@@ -120,10 +120,14 @@ export async function planePhotoFrame(context: coreContext, selection: d3.Select
         dispatch.call('viewerChanged');
 
         loadImage(_photo, '');
-        _planeWrapper.classed('show-loader', true);
+        _planeWrapper
+            .insert('svg', '.plane-frame')
+            .attr('class', 'photo-spinner')
+            .append('use')
+            .attr('href', '#iD-spinner');
         loadImage(_photo, data.image_path)
             .then(selection => {
-                _planeWrapper.classed('show-loader', false);
+                _planeWrapper.select('svg.photo-spinner').remove();
                 const { naturalWidth, naturalHeight } = selection.node()!;
                 _photoDimensions = [naturalWidth, naturalHeight];
                 updateTransform();

modules/ui/geolocate.js

@@ -14,7 +14,7 @@ export function uiGeolocate(context) {
         // don't hang indefinitely getting the location
         timeout: 6000 // 6sec
     };
-    var _locating = uiLoading(context).message(t.addOrUpdate('geolocate.locating')).blocking(true);
+    var _locating = uiLoading().message(t.addOrUpdate('geolocate.locating')).blocking(true);
     var _layer = context.layers().layer('geolocate');
     var _position;
     var _extent;

modules/ui/init.js

@@ -450,7 +450,7 @@ export function uiInit(context) {
         }
 
         var osm = context.connection();
-        var auth = uiLoading(context).message(t.addOrUpdate('loading_auth')).blocking(true);
+        var auth = uiLoading().message(t.addOrUpdate('loading_auth')).blocking(true);
 
         if (osm && auth) {
             osm
@@ -684,7 +684,7 @@ export function uiInit(context) {
 
     context.uploader()
         .on('saveStarted.ui', function() {
-            _saveLoading = uiLoading(context)
+            _saveLoading = uiLoading()
                 .message(t.addOrUpdate('save.uploading'))
                 .blocking(true);
             context.container().call(_saveLoading);  // block input during upload

modules/ui/loading.js

@@ -2,7 +2,7 @@ import { select as d3_select } from 'd3-selection';
 import { uiModal } from './modal';
 
 
-export function uiLoading(context) {
+export function uiLoading() {
   let _modalSelection = d3_select(null);
   let _message = '';
   let _blocking = false;
@@ -17,9 +17,10 @@ export function uiLoading(context) {
       .attr('class', 'modal-section fillL');
 
     loadertext
-      .append('img')
-      .attr('class', 'loader')
-      .attr('src', context.imagePath('loader-white.gif'));
+      .append('svg')
+      .attr('class', 'spinner')
+      .append('use')
+      .attr('href', '#iD-spinner');
 
     if (typeof _message === 'string') {
       loadertext

modules/ui/sections/raw_member_editor.js

@@ -47,7 +47,11 @@ export function uiSectionRawMemberEditor(context) {
         d3_event.preventDefault();
 
         // display the loading indicator
-        d3_select(this).classed('loading', true);
+        d3_select(this)
+          .classed('loading', true)
+          .select('svg')
+          .insert('use', 'use')
+          .attr('href', '#iD-loader');
         context.loadEntity(d.id, function() {
             section.reRender();
         });

modules/ui/sections/raw_membership_editor.js

@@ -270,10 +270,13 @@ export function uiSectionRawMembershipEditor(context) {
 
     function downloadMembers(d3_event, d) {
         d3_event.preventDefault();
-        const button = d3_select(this);
 
         // display the loading indicator
-        button.classed('loading', true);
+        d3_select(this)
+          .classed('loading', true)
+          .select('svg')
+          .insert('use', 'use')
+          .attr('href', '#iD-loader');
         context.loadEntity(d.relation.id, function() {
             section.reRender();
         });

modules/ui/settings/local_photos.js

@@ -52,7 +52,9 @@ export function uiSettingsLocalPhotos(context) {
                         .select('ul')
                         .append('li')
                         .classed('placeholder', true)
-                        .append('div');
+                        .append('svg')
+                        .append('use')
+                        .attr('href', '#iD-spinner');
                     dispatch.call('change', this, files);
                 }
                 d3_event.target.value = null;

modules/ui/spinner.js

@@ -4,9 +4,9 @@ export function uiSpinner(context) {
 
     return function(selection) {
         var img = selection
-            .append('img')
-            .attr('src', context.imagePath('loader-black.gif'))
+            .append('svg')
             .style('opacity', 0);
+        img.append('use').attr('href', '#iD-spinner');
 
         if (osm) {
             osm

modules/ui/tag_reference.js

@@ -31,7 +31,9 @@ export function uiTagReference(what) {
         if (!wikibase) return;
 
         _button
-            .classed('tag-reference-loading', true);
+          .select('svg')
+          .insert('use', 'use')
+          .attr('href', '#iD-loader');
 
         wikibase.getDocs(what, gotDocs);
     }
@@ -111,7 +113,8 @@ export function uiTagReference(what) {
         _loaded = true;
 
         _button
-            .classed('tag-reference-loading', false);
+          .select('svg use[href="#iD-loader"]')
+          .remove();
 
         _body
             .classed('expanded', true)