Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Change design of loading indicator #13251

Merged
merged 2 commits into from
Jul 26, 2023
Merged

Change design of loading indicator #13251

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9994d5e
Change design of loading indicator
HDinger Jul 26, 2023
d70b04c
Adapt tests to new loading indicator class name
HDinger Jul 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 7 additions & 8 deletions frontend/src/app/core/loading-indicator/loading-indicator.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,114 +26,113 @@
// See COPYRIGHT and LICENSE files for more details.
//++

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

export const indicatorLocationSelector = '.loading-indicator--location';
export const indicatorBackgroundSelector = '.loading-indicator--background';

export function withLoadingIndicator<T>(indicator:LoadingIndicator, delayStopTime?:number):(source:Observable<T>) => Observable<T> {
return (source$:Observable<T>) => {
indicator.start();

return source$.pipe(
tap(
() => indicator.delayedStop(delayStopTime),
() => indicator.stop(),
() => indicator.stop(),
),
);
};
}

export function withDelayedLoadingIndicator<T>(indicator:() => LoadingIndicator):(source:Observable<T>) => Observable<T> {
return (source$:Observable<T>) => {
setTimeout(() => indicator().start());

return source$.pipe(
tap(
() => undefined,
() => indicator().stop(),
() => indicator().stop(),
),
);
};
}

export class LoadingIndicator {
private indicatorTemplate =
`<div class="loading-indicator--background">
<div class="loading-indicator">
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
<div class="block-4"></div>
<div class="block-5"></div>
`<div class="loading-indicator--background">
<svg class="op-loading-indicator">
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="2px"/>
</svg>
</div>
</div>
`;

constructor(public indicator:JQuery) {
}

public set promise(promise:Promise<unknown>) {
this.start();

// Keep bound method around
const stopper = () => this.delayedStop();

promise
.then(stopper)
.catch(stopper);
}

public start() {
// If we're currently having an active indicator, remove that one
this.stop();
this.indicator.prepend(this.indicatorTemplate);
}

public delayedStop(time = 25) {
setTimeout(() => this.stop(), time);
}

public stop() {
this.indicator.find('.loading-indicator--background').remove();
}
}

@Injectable({ providedIn: 'root' })
export class LoadingIndicatorService {
// Provide shortcut to the primarily used indicators
public get table() {
return this.indicator('table');
}

public get wpDetails() {
return this.indicator('wpDetails');
}

public get modal() {
return this.indicator('modal');
}

// Returns a getter function to an indicator
// in case the indicator is shown conditionally
public getter(name:string):() => LoadingIndicator {
return this.indicator.bind(this, name);
}

// Return an indicator by name or element
public indicator(indicator:string|JQuery):LoadingIndicator {
if (typeof indicator === 'string') {
indicator = this.getIndicatorAt(indicator);
}

return new LoadingIndicator(indicator);
}

private getIndicatorAt(name:string):JQuery {
return jQuery(indicatorLocationSelector).filter(`[data-indicator-name="${name}"]`);
}
}
15 changes: 7 additions & 8 deletions frontend/src/app/shared/components/toaster/toast.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
<div class="op-toast -{{ type }}" tabindex="0">
<div class="op-toast--content" role="alert" aria-atomic="true">
<ng-container *ngIf="type === 'loading'">
<div
<svg
*ngIf="(loading$ | async)"
class="loading-indicator -small"
class="op-loading-indicator"
>
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
<div class="block-4"></div>
<div class="block-5"></div>
</div>
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="2px"/>
</svg>
<p [textContent]="toast.message"></p>
</ng-container>
<p *ngIf="type !== 'loading'">
Expand Down
30 changes: 14 additions & 16 deletions frontend/src/global_styles/content/_loading_indicator.lsg
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,25 @@
# Loading indicator

```
<div class="loading-indicator">
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
<div class="block-4"></div>
<div class="block-5"></div>
</div>
```html
<svg class="op-loading-indicator">
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="2px"/>
</svg>
```


To block the entire page, wrap the element in a div.loading-indicator--background
To block the entire page, wrap the element in a `div.loading-indicator--background`


``` html
<div class="loading-indicator--background">
<div class="loading-indicator">
<div class="block-1"></div>
<div class="block-2"></div>
<div class="block-3"></div>
<div class="block-4"></div>
<div class="block-5"></div>
</div>
<svg class="op-loading-indicator">
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="2px"/>
</svg>
</div>
```
104 changes: 66 additions & 38 deletions frontend/src/global_styles/content/_loading_indicator.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,33 @@
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

@keyframes svg_ani-1
0%
x: 150px
width: 0
36%
x: 0
width: 150px
72%
x: 0
width: 0
100%
x: 0
width: 0

@keyframes svg_ani-2
0%
x: 150px
36%
x: 0
72%
x: -100px
100%
x: -100px

$loading-indicator-bg-color: var(--body-background)
$loading-indicator-spinner-color: var(--primary-color)
$loading-indicator-width: 150px
$loading-indicator-height: 70px

.loading-indicator--background
@include overlay-background
Expand All @@ -33,46 +57,50 @@ $loading-indicator-spinner-color: var(--primary-color)
.loading-indicator--location
position: relative

.loading-indicator
margin: 80px auto
width: 100px
height: 50px
text-align: center
font-size: 10px

[class^='block-']
background-color: $loading-indicator-spinner-color
height: 100%
width: 6px
display: inline-block
animation: block-waveStretchDelay 1.2s infinite ease-in-out
margin: 0 1px
.op-loading-indicator
margin: 0
position: relative
left: calc(50% - ($loading-indicator-width / 2))
top: 33%
width: $loading-indicator-width
height: $loading-indicator-height
view-box: 0 0 $loading-indicator-width $loading-indicator-height

.block-1
animation-delay: -1.2s
.block-2
animation-delay: -1.1s
.block-3
animation-delay: -1s
.block-4
animation-delay: -0.9s
.block-5
animation-delay: -0.8s
rect
rx: 4px
x: 152px
height: 10px
width: 150px
animation-duration: 2000ms
animation-iteration-count: infinite
animation-timing-function: linear
animation-name: svg_ani-1

&.-compact
margin: 20px auto
&:nth-of-type(1)
fill: #f89a43
x: 140px
y: 6px

&.-small
width: 40px
height: 24px
margin: 0
text-align: left
&:nth-of-type(2)
fill: #f89a43
y: 26px
animation-delay: 660ms

[class^='block-']
width: 4px
&:nth-of-type(3)
fill: #346495
y: 46px
animation-name: svg_ani-1
animation-delay: 1330ms

@keyframes block-waveStretchDelay
0%, 40%, 100%
transform: scaleY(0.4)
20%
transform: scaleY(1)
&:nth-of-type(4)
fill: #36c434
y: 44px
rx: 2px
width: 14px
height: 14px
transform-box: fill-box
transform-origin: center
transform: rotate(45deg)
animation-name: svg_ani-2
animation-delay: 2130ms
Loading