From 3bf45f35fada80a139cdbf403a8452cba17e7eb8 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 26 Aug 2026 01:28:41 +0200 Subject: [PATCH 1/4] Remove unused asset --- dist/img/arrow-icon.png | Bin 1393 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 dist/img/arrow-icon.png diff --git a/dist/img/arrow-icon.png b/dist/img/arrow-icon.png deleted file mode 100644 index f1a7516572d79cb578800df4ba8896eb0e222715..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1393 zcmV-%1&;cOP)uW?o1er(~ zNRg4)hXxWXsIihFsAfi!d`z0whs4Ue*SfzxoPEx{a~*9A&*s8C_n!UV|MmK>bwv7f zQOQU~Fg&BGjQAW=H~yBTC>I$!i#% zi;TN6y`o_<=Jh z<3*$_ISeO4EP~@fav1HsK|YM4++XZBaUu-lON?{;jPf!rg$yee5#ezZ|K zUns-F;aM&a;V5Gl%7KCcDN3yfMURRTVJpfp@&VGLbfRp$EXa;Xgho6{P4d$M@_dl^ z3RmRM8kFN$5D~+;M2-^}Q!_^;<|hd@n9tBqwrs?+CM&}5p`6_qCyP|d$YK0~v6HeS zhf5egi?T2Ix(8)W#xe@k)QHg$jMf01u>J{SaZ$LOxUi=Qk5ZL-v?_oWl;|MJX>y?m z4Gq4%#Cenx3<*0@wvh-EQIs0t4wNGd%hEWh>18M#D3{3L1H)wHFn+{Xodq<5rjm0Q zO-YV^NJR$caNNvUj0?e+o?K>r^2^`+i7_UWN}>7&@i|J1FazaX`cW()PhzywMF$;p za5D3(=LDT}af~AO`pI6iSm&Ne)j{ zVChP;564VAT_~sVj7`<)GVP2-7>A+Mi3snZ)F#>(dQwb8gd?I{ggQK(c)C$0<0!)s zr7fjLS>KDt7%d`fC`yp@?<{PgLmkC)3S(lTNd;%6J0udJ732M6<3c=p>DQZ4L`2+! z(uwC+l=Uf!a<`$mA*xYL~ zjBwQ9>B7^EF(JsDD|HqzucLfa*g6fvGbM>(R(h#U)&?CtjZz&Bay{}R4o@i$6*Jm` zvYUQI=@O+%$t*m_$Z-l~k_ctR9K)*MW0bFYnt3})j@229G@dbzSr}abv^qQ1W&PBN zupYx`EcIRshS4BGc}bf{Qpz&(<3ezPKOaC*w)Ga2ZFrP<#a<)AQHyez4!%RvKo#m; zgvBVvp)1W&d+_90Qs@Dssge&mb!TR9DwNGZY{p(~>Qj^r3=TYF9929)Gc7dp7?oK| zb|MU8b5OGJS05&~pcw5eqJNKkEJ=4NSQ^Hm{fz9(B%NsHUY0R}^1=Wa_}xGiE$k1o ze`{X{^r~#;H{M_^OQ>fiGpJ`NPqT|Wo;=E1Oux35iE7sIZBYkE1`3}Yw*4C4PKu!C zvX)o*l;1+5{(_yfvXD{N<0Y+<+o+ Date: Wed, 26 Aug 2026 01:12:47 +0200 Subject: [PATCH 2/4] Replace loading GIF with CSS animation --- css/10_colors.css | 2 -- css/80_app.css | 11 +++++++---- dist/img/loader_bg.gif | Bin 606 -> 0 bytes 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 dist/img/loader_bg.gif diff --git a/css/10_colors.css b/css/10_colors.css index f23a2da372b..804fc8f7126 100644 --- a/css/10_colors.css +++ b/css/10_colors.css @@ -30,7 +30,6 @@ --bg-filter: none; --mix-blend-mode: normal; - --bg-blend-mode: normal; --valid-bg-color: #cfc; --valid-label-color: #afa; @@ -97,7 +96,6 @@ --bg-filter: invert(); --mix-blend-mode: screen; - --bg-blend-mode: difference; --valid-bg-color: #030; --valid-label-color: #050; diff --git a/css/80_app.css b/css/80_app.css index 26ede234407..6d03b4cf4f3 100644 --- a/css/80_app.css +++ b/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 diff --git a/dist/img/loader_bg.gif b/dist/img/loader_bg.gif deleted file mode 100644 index 3d88f3d12085dfae6b9e65cb7bdada62bfcaae72..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 606 zcmZ?wbhEHbOsabFe`8bmHl(t`ut2lt6Z|-12 zE}Wh_S5wqUbzaQ(+_&ALIt@Ko?UDcB0n`-HSM^zQHqf4niLC*hk{ktcD>kk0Uaa-V z6`Mu!A5JtkXc+T%f7ZNx)weYvR*s|KWx}G!g@+0)CaF!rp~s`s0jMXsK#x%&=4N0{ zOl8}X@@22C)ouFD$zX^>&k3NO)Kfxlu3ln@m>I@%H+`N;#fDXy$An{M$tq#jvtf>> zAcx~6%L7+K3|a1%i6mt%n^{@*maF;U8!?q47cBl^me)uvt7Bm}c+b%JOp^XQ-|wso UO{bl|8O!XjZj}Us3loDi0R8#I;s5{u From b13ddf3e65cc526fd67d81c87b8a88daa0ee3276 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Thu, 27 Aug 2026 04:26:23 +0200 Subject: [PATCH 3/4] Replace loading spinner GIFs with a dynamic SVG --- css/10_colors.css | 6 ----- css/60_photos.css | 38 ++++++++-------------------- css/80_app.css | 11 ++++---- dist/img/loader-black.gif | Bin 1715 -> 0 bytes dist/img/loader-white.gif | Bin 1715 -> 0 bytes modules/core/history.ts | 2 +- modules/operations/split.ts | 2 +- modules/services/kartaview.ts | 6 +++++ modules/services/mapilio.js | 1 + modules/services/plane_photo.ts | 8 ++++-- modules/ui/geolocate.js | 2 +- modules/ui/init.js | 4 +-- modules/ui/loading.js | 9 ++++--- modules/ui/settings/local_photos.js | 4 ++- modules/ui/spinner.js | 4 +-- svg/iD-sprite/graphics/spinner.svg | 17 +++++++++++++ 16 files changed, 61 insertions(+), 53 deletions(-) delete mode 100644 dist/img/loader-black.gif delete mode 100644 dist/img/loader-white.gif create mode 100644 svg/iD-sprite/graphics/spinner.svg diff --git a/css/10_colors.css b/css/10_colors.css index 804fc8f7126..248fbbfa6db 100644 --- a/css/10_colors.css +++ b/css/10_colors.css @@ -28,9 +28,6 @@ --dark-tooltip-text-color: #fff; --dark-tooltip-bg-color: #444; - --bg-filter: none; - --mix-blend-mode: normal; - --valid-bg-color: #cfc; --valid-label-color: #afa; --valid-highlight-color: #8f8; @@ -94,9 +91,6 @@ --dark-tooltip-text-color: #ccc; --dark-tooltip-bg-color: #000; - --bg-filter: invert(); - --mix-blend-mode: screen; - --valid-bg-color: #030; --valid-label-color: #050; --valid-highlight-color: #060; diff --git a/css/60_photos.css b/css/60_photos.css index c4efb412a16..93f7bc7442f 100644 --- a/css/60_photos.css +++ b/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); diff --git a/css/80_app.css b/css/80_app.css index 6d03b4cf4f3..b1c28c07595 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -670,10 +670,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 { @@ -5223,10 +5223,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; diff --git a/dist/img/loader-black.gif b/dist/img/loader-black.gif deleted file mode 100644 index 08f0d7e346c26196d1dbdec9cb52fcf95951afb9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1715 zcmZ|PeNfV80KoCzkKYdjL_l5?5s^0m6-}IM=~icm2m*ylrKPuJ9(v8QqBJxtHMB%3 zw9+zP@}+`aOjFlDgZ>UQgPw|1+wI|r++_Q#&TpXcuLe4m#jrF?Ph zIw2qgzLNm%v2^Luyu3WC)%xJU1F=}VWXTc=g+d?@@OXS&TpW=|gdiw1G&CY2A~iKN zGBWb+-Ma+^1xlsTVzG2}b#XWxyt5aWFvlJ?5?%Z3~J95W}iZ7}%0 z6%4=t10cCuHF{d{3_Q~E&CbkZ6r|iTX_h)}w-wr`eEFGK!;rce`Yp0g$8wLikqSqnhS? znu>SQk>(eMAgBYyFuzA9II9Wdg=Ae)p^>0-5{b^3m;^7orZT3dW^Sg>I7rhhTz6fbzB)b&Pklfoxv3;~TL5(+Ue;D-57@8BVH1VC)+9a|dkAG; z@l)>@J;b)A^C^dD9Z3}rT#>HW`}q9B>D1`ve&g$GCAL~32s4<{{Il!Ynmb znxL+}ia~;oHjx;*#-?`CvGxw#krPl$LzTN@gC{Dvo(B*5UZ@G-55mKBWZ#RUHDeQ@ zm&OM<^^-8GA(X?4RQ$(@e&@7#l4dTZ2ej9D-oW0c=U?L%cdCD!=^nv4?(MoTuGRU> zZJujl-ok>3_p($`&t8e=+0Wht)6z{l%!CSaW%~9#h_d2>VBvmuE}}6QYNRx%=u|4* zU9=HuQc+=;DkV}**kz|rC!FhH_V&pxGzJa!4|hZC5m?0xVn>Y^_e~g2ohfc@EB*la zmgu>r4IZQj?^{`B$cU%4jy*A~DO>a9wBvk9DW|_&zs(d;`>__7m$e*5i?{mzLbQt> zD9s~+05PK6->5Ay!Tb;jgG6Gu+m<7Ct*A2jlBFaFB1!%H4;+$(Za>^8ZEj9z>xhtX zb{~34rWI(&^QdCR0pTAg}ol`(|T|FGL={iBR*73WBdDc;~18`p+=q1SUpKDpv3 z+y;dUB{TwoCc$A%;EuHNZ4{!CfItwGUZ{OG6|?BTA?4x2$xSWZs-TL4suKv6!-Q9{ zJJdbuJ|9&SJBXCw876G(MoG-X$=!d&`2aYxw#eL?Iz~i hzX6rp*3sl~C59UvqqYe*u|SOke;2 diff --git a/dist/img/loader-white.gif b/dist/img/loader-white.gif deleted file mode 100644 index b1451fd7d434215125d3b5bf2432edeef61dd740..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1715 zcmaLXc~FvR9Ki7xcp*TP%L5frP!SdL*l4WX*;Pd3vOuY{VsyTIyfsDB zP}9t-w6gUswb{`W4NX&Ysa88oyQa2m$~M;~7dCgd{@M5M=b8CD-{<+gL42<7hFuJR z0sP7WR#sN}`ufyrb#!zzjYbzkaRJXkNW~_2I(@y6)6F zBoawsVd2EYL`+OfXJ@Cgv-91%cgxDko;-Q-?%lhOA3u(ajNH3-ue7vudV2c){rgc- zQOnEAGMQ{}aImtna&&am)6;WlX{olhwx_3Oad9y*F|nI8jlGeR{WF)c}$yv z>veMNfsIw;4R5cc_^qF0r1>c$s&~Hp!_{JF_92du|>cRS@uyiBJ@<6y9=;o8-PLQuBi_{7i-T& zwX}UtaEE!@1i>Nbo;@!1eLNIq@0fsug-%XkNg`x_ZZaIn(@o7{MZZnY+@F0o|2P-U zn|KD*-+uJ_y_@d?F(|=}n~3Halw;(9oO<9x&OB}L(V5i9JKbHW8u74yIJ+HnHB6;V zl|a1EcebLO=nS*Ncxt#@QtM*sX141N0auJMB}cfiqmg8*4et{k&vor%5RP*TI9Ju} zjg#lZ)ga`*Rv-WZWPo63Rc>tMB&Xpw9n$XPB98H*htt@Nx2t1R7W9yddU+2y+i&e| zfy0%soCsPy+d-Mdj9qT(7=9K*<9JvlL?vxwN5_B`j)9ix2Qq=pk{so6b5UV}6BP*J z18(#@i&Mds2S`HabB&>vPEf4K#tWpkNU2T1HqLIc0U;6&(GJ6r;X}ia>*FKgx{=AL zFunHXtn0t#9 z(-dm&BD>Zvv&DhewK&@W_KeqA>@s0T+rqY?~Mf}t&dIN`^sRyJ4{@FJ)< zhEr7#oro?$G;Ds}rV%)+w%0wP;p%!ryt{6&Hy@vCeV_~RsqBbb+RaC2v#3sTMHrWq zmXyH)uu!L*+&mJs=wt>N4?9(XCrisKYVc=jYNcgoVW-s@hK_1uRP&S0V7JBPTsL|* zc(usfqOU(!Gvqih*iAb*3_7SCX%1_7UpSGgPL(m~PG1}Anj+&29Dmfhgz>EtJ$cjI zi*DR;?DC*kihX$KVFl$D8WK1y6M8*;@BNtiblIL1rZ}30O-)M=OU!~QybY9voU`8Rr6wb18+%acBta4D52{taYF{a(e?kn69V@*6_GkH_5FytrzFz zkAG(UbnQlKQLky5ACtYl!|?l&n&pZOBc)(xhn(LU=S=Q+&>W}uQ%THgiC|?(Od#o0 zW*O#XWF)QkyBm!$M_}$QED{z=Vqwq<$kEW0BSZop3x#6&h&A~tAtm-i3BR;dP;uHs zXqQ?nJPQ>zD$In8T2YIr-Bjqwu%iU`h)m2(t@p4rBht~aV0GDqG&B2$FPQ(_yCG@w zV`w(Fzb*tx!?_jLOXn5bdaa}$t)aW_*n7(z+!pL6-ymW%j?kf^H3TU z$ze&!>G)&m8DWZSSW1FQNF@OY#_2BEZ)pXsB2}EOa-y=3a5z#>Sp~JSWWym4INzfd sYWGz@dpnK6?1QLaAggrhN2Kk4_kbtE*L_XocI3j}PDGXMYp diff --git a/modules/core/history.ts b/modules/core/history.ts index bfabfbcc1ed..6036e02ba2e 100644 --- a/modules/core/history.ts +++ b/modules/core/history.ts @@ -643,7 +643,7 @@ export class coreHistory extends EventDispatcher { 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[] }) => { diff --git a/modules/operations/split.ts b/modules/operations/split.ts index 82111de96d1..a8975332773 100644 --- a/modules/operations/split.ts +++ b/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(); diff --git a/modules/services/kartaview.ts b/modules/services/kartaview.ts index 9dea9ea3727..e2358670936 100644 --- a/modules/services/kartaview.ts +++ b/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'); diff --git a/modules/services/mapilio.js b/modules/services/mapilio.js index 31239f2311e..69523b34de7 100644 --- a/modules/services/mapilio.js +++ b/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 = ''; diff --git a/modules/services/plane_photo.ts b/modules/services/plane_photo.ts index 3b9ad5ee24d..d29a088e87e 100644 --- a/modules/services/plane_photo.ts +++ b/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(); diff --git a/modules/ui/geolocate.js b/modules/ui/geolocate.js index e6a8725f81f..3eab84dea65 100644 --- a/modules/ui/geolocate.js +++ b/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; diff --git a/modules/ui/init.js b/modules/ui/init.js index ac476f2d1d1..c42c9747db2 100644 --- a/modules/ui/init.js +++ b/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 diff --git a/modules/ui/loading.js b/modules/ui/loading.js index 1dfbc77b952..7e605ec9103 100644 --- a/modules/ui/loading.js +++ b/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 diff --git a/modules/ui/settings/local_photos.js b/modules/ui/settings/local_photos.js index 8869af855a3..1cc7c7ae12f 100644 --- a/modules/ui/settings/local_photos.js +++ b/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; diff --git a/modules/ui/spinner.js b/modules/ui/spinner.js index 758ed2d5dc1..e51cb265e43 100644 --- a/modules/ui/spinner.js +++ b/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 diff --git a/svg/iD-sprite/graphics/spinner.svg b/svg/iD-sprite/graphics/spinner.svg new file mode 100644 index 00000000000..a80a02886e4 --- /dev/null +++ b/svg/iD-sprite/graphics/spinner.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + From 54b55389cae44658c2e1e0103623381dadd80c57 Mon Sep 17 00:00:00 2001 From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com> Date: Wed, 23 Sep 2026 01:03:00 +0200 Subject: [PATCH 4/4] Replace loading GIF with a dynamic SVG --- css/80_app.css | 14 -------------- dist/img/mini-loader.gif | Bin 1413 -> 0 bytes modules/ui/sections/raw_member_editor.js | 6 +++++- modules/ui/sections/raw_membership_editor.js | 7 +++++-- modules/ui/tag_reference.js | 7 +++++-- svg/iD-sprite/graphics/loader.svg | 11 +++++++++++ 6 files changed, 26 insertions(+), 19 deletions(-) delete mode 100644 dist/img/mini-loader.gif create mode 100644 svg/iD-sprite/graphics/loader.svg diff --git a/css/80_app.css b/css/80_app.css index b1c28c07595..317dad5df32 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -518,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 ------------------------------------------------------- */ @@ -2904,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%; diff --git a/dist/img/mini-loader.gif b/dist/img/mini-loader.gif deleted file mode 100644 index 6bd588138b6a9848b86360ce5bcc36679269ac98..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1413 zcmZ?wbhEHb6k!ly_{74nZ{NPo&Q2vIrR&$P|NsA=0R|NRbNji51UowhxEkphFf#(h zfkF|!0SYdOC5b@V#=fE;F*!T6L?J0PJu}Z%>HY5gN(z}Nwo2iqz6QPp&Z!xh9#uuD z!Bu`C$yM3OmMKd1b_zBXRu#Dgxv3?I3Kh9IdBs*0wn~X9`AMl(KsHENUr7P1q$Jx` z$q^)>0J76LzbI9~RL@K|*}%|5!Q4{M(A3P_(p*Qu2*}qru+TR$&^55MGBvg`Fj9a5 zC7^9ZDQQ+gE^bh}fIM5JjFOT9D}DX)@^Za$W4-*MbbUihOG|wNBYh(yU7!lx;>x^| z#0uTKVr7^KE~&-IMVSR9nfZANAQKal@=Hr>m4GgVcp@iOHFHAVE#AE?-|O&%EN2#JuEGPZwJypgDS( znJHGlv|?iJWMJ%QY36Kb=xX9Q@SSSTXz2vg>yn>bnwy$e0@Is<&%#K*@}C@U!{$jiyf zNJ~jdh>MAe2nz`c@bmHVaC32Tu(PqUFf##*2*sZ)tXvE%3_74v1XRE{Fzb8ly0eb? zgy+Eu3;lz;-$!ZmJrNGQ`gB3g%UuW6+5L5@zs%maV%}VvZcUBApMBjdP&1erbeI{K z8F(2u7#NtvIX2!|sAqTczz&PoYny*0XjCLw&PtqsWFJH=FHo(r#fCczfNI%x0@XVH zNRR-jRXnivjVMQf4)^<<%iCpCpms2V?BD>}!3@;L3DxJugzN&4EZ7ASo9-+EntBN2 a0=TI-TmV(egzf@Uh5{XCkPB>77_0%}=jA*A diff --git a/modules/ui/sections/raw_member_editor.js b/modules/ui/sections/raw_member_editor.js index a175257f74e..6c559d5d465 100644 --- a/modules/ui/sections/raw_member_editor.js +++ b/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(); }); diff --git a/modules/ui/sections/raw_membership_editor.js b/modules/ui/sections/raw_membership_editor.js index ce6c436855e..de4fef9eb2e 100644 --- a/modules/ui/sections/raw_membership_editor.js +++ b/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(); }); diff --git a/modules/ui/tag_reference.js b/modules/ui/tag_reference.js index b64dcd2df24..86595d629f6 100644 --- a/modules/ui/tag_reference.js +++ b/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) diff --git a/svg/iD-sprite/graphics/loader.svg b/svg/iD-sprite/graphics/loader.svg new file mode 100644 index 00000000000..43a6baf1102 --- /dev/null +++ b/svg/iD-sprite/graphics/loader.svg @@ -0,0 +1,11 @@ + + + + + + + + + + +