Skip to content

Commit

Permalink
explorer: implement loader
Browse files Browse the repository at this point in the history
  • Loading branch information
@deuch13
deuch13 committed Jul 3, 2024
1 parent 1322166 commit 90a643b
Show file tree
Hide file tree
Showing 9 changed files with 81 additions and 34 deletions.
11 changes: 7 additions & 4 deletions explorer/src/lib/components/__tests__/__snapshots__/BlocksCard.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2643,11 +2643,14 @@ exports[`Blocks Card > should disable the \`Show More\` button is the card is in
</button>
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions explorer/src/lib/components/__tests__/__snapshots__/DataCard.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,11 +162,14 @@ exports[`DataCard > should render the \`DataCard\` in the loading state 1`] = `
</button>
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions explorer/src/lib/components/__tests__/__snapshots__/TransactionsCard.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,14 @@ exports[`Transactions Card > should disable the \`Show More\` button if the card
</button>
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down
23 changes: 23 additions & 0 deletions explorer/src/lib/components/data-card/DataCard.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,26 @@
font-size: 1.125rem;
line-height: 32.2px;
}

.data-card__progress-bar.dusk-progress-bar {
background-color: transparent;
height: 0.125rem;
}

.data-card__progress-bar .dusk-progress-bar__filler {
background-color: var(--primary-color);
}

.data-card__progress-bar .dusk-progress-bar__filler--undetermined {
width: 100%;
animation: progressBarAnimationAlternate 2s infinite;
}

@keyframes progressBarAnimationAlternate {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
4 changes: 2 additions & 2 deletions explorer/src/lib/components/data-card/DataCard.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<script>
import { DataAlert } from "$lib/components";
import { Button, Card } from "$lib/dusk/components";
import { Button, Card, ProgressBar } from "$lib/dusk/components";
import { makeClassName } from "$lib/dusk/string";
import "./DataCard.css";
Expand Down Expand Up @@ -43,7 +43,7 @@
{/if}
</header>
{#if loading && !data}
<p class="data-card__loading-notice">Loading...</p>
<ProgressBar className="data-card__progress-bar" />
{:else if error || hasEmptyData}
<DataAlert on:retry {error} />
{:else if data}
Expand Down
11 changes: 7 additions & 4 deletions explorer/src/routes/blocks/__tests__/__snapshots__/page.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,14 @@ exports[`Blocks page > should render the Blocks page, start polling for blocks a
</button>
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down
22 changes: 14 additions & 8 deletions explorer/src/routes/blocks/block/__tests__/__snapshots__/page.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,14 @@ exports[`Block Details > should render the Block Details page and query the nece
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand All @@ -51,11 +54,14 @@ exports[`Block Details > should render the Block Details page and query the nece
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions explorer/src/routes/transactions/__tests__/__snapshots__/page.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,14 @@ exports[`Transactions page > should render the Transactions page, start polling
</button>
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions explorer/src/routes/transactions/transaction/__tests__/__snapshots__/page.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,14 @@ exports[`Transaction Details > should render the Transaction details page and qu
</header>
<p
class="data-card__loading-notice"
<div
class="dusk-progress-bar data-card__progress-bar"
role="progressbar"
>
Loading...
</p>
<div
class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
/>
</div>
</div>
Expand Down

0 comments on commit 90a643b

Please sign in to comment.