ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 13:45:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #276 from teaxyz/placeholders

Browse source 
Pre-loader for 'slow-to-load' elements on site
This commit is contained in:
Thomas Smith 2023-01-24 10:16:51 -05:00 committed by GitHub
commit 6948b13cac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 183 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/assets/scripts/bottles.jsx
View file

@ -1,12 +1,24 @@
function Bottles() {
const [bottles, setBottles] = React.useState();
const [isLoading, setLoading] = React.useState(true);
React.useEffect(() => {
fetch("https://app.tea.xyz/api/bottles")
.then((res) => res.json())
.then((res) => setBottles(res));
.then((res) => {
setBottles(res);
setLoading(false);
});
}, []);
if (isLoading) return (
<div id="bottle-preloader" className="flex">
<div id="bottle-status" className="my-auto">
<i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
<div id="bottle-loading-text"><p className="grid-gray">steeping...</p></div>
</div>
</div>
);
if (!bottles) return null;
const names = [...new Set(bottles.map((b) => b.name))];

17
src/assets/scripts/package-bottles.jsx
View file

@ -1,13 +1,28 @@
function PackageBottles() {
const [bottles, setBottles] = React.useState();
const [isLoading, setIsLoading] = React.useState(true);
React.useEffect(() => {
const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
fetch(url)
.then((res) => res.json())
.then((res) => setBottles(res));
.then((res) => {
setBottles(res);
setIsLoading(false);
});
}, []);
if (isLoading) return (
<div id="bottle-preloader" className="flex one-box-down">
<div id="bottle-status" className="flex justifit-content-center">
<div className="mx-auto">
<i className="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
<div id="bottle-loading-text"><p className="grid-gray">steeping available versions...</p></div>
</div>
</div>
</div>
);
if (!bottles) return null;
const names = [...new Set(bottles.map((b) => b.name))];

2
src/layouts/index.html
View file

@ -1,5 +1,7 @@
{{ define "main" }}
{{- partial "preloader.html" -}}
<!-- Hero Section -->
{{- partial "mobile-art-home" -}}

31
src/layouts/page/bottles.html
View file

@ -40,6 +40,36 @@
.expand{
cursor: pointer;
}
.tea-icon{
display:block;
text-align:center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
#bottle-preloader {
width: 100%;
height: 200px;
background: #1a1a1a;
}
#bottle-status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-position: center;
margin: -100px 0 0 -100px;
}
#bottle-loading-text {
font-size: 20px;
text-align: center;
animation: pulse 1s infinite !important;
}
@media screen and (max-width: 576px) {
@ -56,7 +86,6 @@
.title-col{
padding: 4vw !important;
}
}

28
src/layouts/page/package-detail.html
View file

@ -94,6 +94,34 @@
cursor: pointer;
}
.tea-icon{
display:block;
text-align:center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
#bottle-preloader {
width: 100%;
height: 200px;
background: #1a1a1a;
border: 1px solid #949494;;
}
#bottle-status {
width: 100%;
height: 200px;
position: relative;
background-position: center;
}
#bottle-loading-text {
font-size: 20px;
text-align: center;
animation: pulse 1s infinite !important;
}
@media screen and (max-width: 576px) {
.bottles-container{

45
src/layouts/partials/bottle-preloader.html Normal file
View file

@ -0,0 +1,45 @@
<div id="bottle-preloader" class="flex">
<div id="bottle-status" class="justify-content-center mx-auto">
<i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
<div id="bottle-loading-text"><p class="grid-gray">steeping...</p></div>
</div>
</div>
<style>
.tea-icon{
display:block;
text-align:center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
#bottle-preloader {
width: 100%;
height: 200px;
background: #1a1a1a;
}
#bottle-status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-position: center;
margin: -100px 0 0 -100px;
}
#bottle-loading-text {
font-size: 20px;
text-align: center;
animation: pulse 1s infinite !important;
}
</style>
<script>
$(window).on('load', function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
});
</script>

49
src/layouts/partials/preloader.html Normal file
View file

@ -0,0 +1,49 @@
<div id="preloader">
<div id="status">
<i class="icon-tea-logo-iconasset-1 grid-gray tea-icon lead mb-0"></i>
<div id="loading-text"><p class="grid-gray">steeping...</p></div>
</div>
</div>
<style>
.tea-icon{
display:block;
text-align:center;
animation: pulse 1s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a1a1a;
z-index: 9999;
}
#status {
width: 200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
background-position: center;
margin: -100px 0 0 -100px;
}
#loading-text {
font-size: 20px;
text-align: center;
animation: pulse 1s infinite;
}
</style>
<script>
$(window).on('load', function() {
$('#status').fadeOut();
$('#preloader').delay(350).fadeOut('slow');
});
</script>