friendship ended with social-app. php is my new best friend

add spinner stuff

Changed files
+33 -12
css
_partials
js
templates
+22 -9
css/_partials/_globals.scss
···
cursor: pointer;
}
-
.spinner {
background-image: url('@images/spinner.svg');
width: 48px;
height: 48px;
···
background-repeat: no-repeat;
position: relative;
display: block;
&:after {
content: "";
···
height: 100%;
background-color: var(--text-color);
mix-blend-mode: screen;
-
}
-
-
@media (prefers-color-scheme: dark) {
-
filter: invert(1);
-
-
&:after {
-
mix-blend-mode: multiply;
-
}
}
}
···
cursor: pointer;
}
+
@keyframes spin {
+
0% {
+
transform: rotate(0deg);
+
}
+
+
100% {
+
transform: rotate(360deg);
+
}
+
}
+
+
#spinner-container {
+
text-align: center;
+
padding: 10px;
+
}
+
+
#spinner {
background-image: url('@images/spinner.svg');
width: 48px;
height: 48px;
···
background-repeat: no-repeat;
position: relative;
display: block;
+
animation: spin 1s infinite linear;
+
margin: 0 auto;
+
+
path {
+
fill: var(--text-color);
+
}
&:after {
content: "";
···
height: 100%;
background-color: var(--text-color);
mix-blend-mode: screen;
}
}
+4 -2
js/post.mjs
···
});
window.addEventListener('load', (_e) => {
-
document.querySelectorAll('[data-status="unloaded"]').forEach(async (post) => {
-
loadPost(post, document.querySelector("main").classList.contains("post"));
});
});
···
});
window.addEventListener('load', (_e) => {
+
Promise.all(Array.from(document.querySelectorAll('[data-status="unloaded"]')).map(async (post) => {
+
return new Promise(() => loadPost(post, document.querySelector("main").classList.contains("post")));
+
})).then((ret) => {
+
document.getElementById('spinner-container').style.display = "none";
});
});
+5
templates/_partials/spinner.latte
···
···
+
<div id="spinner-container">
+
<svg id="spinner" width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
+
<path d="m702.46 203.32c2.4805 4.9219 4.5586 10.02 6.6016 15.039 4.0781 10.02 8.0195 19.68 14.762 25.262 3.3984 2.8203 3.8789 7.8594 1.0586 11.262-2.8203 3.3984-7.8594 3.8789-11.262 1.0586-9.8398-8.1406-14.52-19.641-19.379-31.559-5.3398-13.121-10.961-26.879-24.262-33.762l-0.5-0.17969c-0.42188-0.14062-0.83984-0.28125-1.2617-0.44141l-0.21875-0.078125c-19.98-6.9805-40-12.621-60.559-16.961-4.3203-0.92188-7.0781-5.1602-6.1602-9.4609 0.92188-4.3203 5.1602-7.0781 9.4609-6.1602 21.141 4.4805 41.82 10.301 62.5 17.539 0.14062 0.039063 0.26172 0.078125 0.39844 0.14062 5.2383 1.9219 11.359 1.9609 17.559 1.0586 6.6992-0.98047 13.422-3.0586 19.262-5.1992l0.53906-0.19922c18.102-6.6211 37.422-13.66 56.262-8.5 4.2383 1.1602 6.7617 5.5391 5.6016 9.7812-1.1602 4.2383-5.5391 6.7617-9.7812 5.6016-13.941-3.8203-30.82 2.3398-46.641 8.1211l-0.53906 0.19922c-2.4414 0.89844-5.0195 1.7812-7.6992 2.6016 23.16 9.8789 46.539 21.559 70.762 35.18 3.8398 2.1602 5.2188 7.0195 3.0586 10.879-2.1602 3.8398-7.0195 5.2188-10.879 3.0586-23.68-13.301-46.379-24.66-68.699-34.238zm292.3 287.1c-3.0195 4.6016-6.3789 8.9219-9.6992 13.199-6.6406 8.5586-13.059 16.82-14.5 25.379-0.71875 4.3398-4.8398 7.2812-9.1797 6.5586-4.3398-0.71875-7.2812-4.8398-6.5586-9.1797 2.1406-12.621 9.7383-22.422 17.641-32.578 8.6797-11.16 17.762-22.859 17.121-37.762l-0.16016-0.82031c-0.078125-0.39844-0.16016-0.78125-0.21875-1.1797l-0.019531-0.16016c-3.9414-20.859-9.0781-41.039-15.578-61-1.3594-4.1992 0.94141-8.6992 5.1211-10.059 4.1992-1.3594 8.6992 0.94141 10.059 5.1211 6.7188 20.621 12.039 41.461 16.102 62.98 0.019531 0.12109 0.058594 0.23828 0.078125 0.35938 0.96094 5.5195 3.9609 10.84 7.8008 15.699 4.1406 5.2383 9.3398 10.039 14.16 14.059l0.44141 0.35938c14.781 12.379 30.559 25.578 35.5 44.52 1.1016 4.2617-1.4609 8.6211-5.7188 9.7188-4.2617 1.1016-8.6211-1.4609-9.7188-5.7188-3.6406-13.941-17.422-25.48-30.32-36.281l-0.44141-0.35938c-1.9805-1.6602-4.0391-3.4609-6.1016-5.3789 3 24.859 4.5391 50.941 4.8789 78.859 0.058593 4.3984-3.4805 8.0195-7.8789 8.0586-4.3984 0.058594-8.0195-3.4805-8.0586-7.8789-0.32031-27-1.8398-52.32-4.7383-76.559zm-26.781-233.82c0.87891 5.4414 1.3398 10.941 1.7812 16.34 0.87891 10.801 1.7383 21.199 6.4609 28.5 2.3984 3.6992 1.3398 8.6406-2.3398 11.039-3.6992 2.3984-8.6406 1.3398-11.039-2.3398-6.9609-10.762-7.9609-23.121-9.0195-35.941-1.1602-14.141-2.3594-28.961-13.02-39.52l-0.23828-0.17969c-0.42188-0.30078-0.83984-0.62109-1.2617-0.94141-0.078126-0.058594-0.17969-0.14062-0.26172-0.21875-19.461-14.539-39.559-27.398-60.898-38.898-3.8789-2.0781-5.3398-6.9219-3.2617-10.82 2.0781-3.8789 6.9219-5.3398 10.82-3.2617 21.941 11.84 42.699 25.121 62.879 40.219 0.16016 0.10156 0.32031 0.21875 0.48047 0.33984 4.3984 3.3984 10.219 5.2812 16.34 6.2617 6.6797 1.0781 13.738 1.1016 19.98 0.82031l0.57813-0.019531c19.262-0.85938 39.82-1.8008 56.219 8.8008 3.7188 2.3789 4.7812 7.3203 2.3984 11.039-2.3789 3.7188-7.3203 4.7812-11.039 2.3984-12.16-7.8594-30.102-7.0586-46.898-6.3008l-0.57812 0.019531c-2.6016 0.12109-5.3398 0.17969-8.1602 0.16016 19.121 16.379 37.898 34.559 56.922 54.82 3.0195 3.2188 2.8594 8.2617-0.33984 11.281-3.2188 3.0195-8.2617 2.8594-11.281-0.33984-18.578-19.801-36.801-37.461-55.238-53.301zm-75.641 630.46c-5.5-0.32031-10.941-1.0586-16.301-1.8008-10.738-1.4805-21.121-2.8984-29.281 0.14062-4.1211 1.5391-8.7188-0.55859-10.262-4.6797-1.5391-4.1211 0.55859-8.7188 4.6797-10.262 11.98-4.4609 24.238-2.7617 36.98-1.0195 14.039 1.9414 28.738 3.9609 41.34-4.0781l0.21875-0.17969c0.42188-0.37891 0.83984-0.76172 1.2812-1.1211 0.10156-0.10156 0.21875-0.17969 0.33984-0.26172 15.98-13.762 30.801-28.262 44.82-43.84 2.9609-3.2812 8-3.5391 11.281-0.60156 3.2812 2.9609 3.5391 8 0.60156 11.281-14.398 16.02-29.719 30.98-46.301 45.238-0.16016 0.14062-0.30078 0.30078-0.48047 0.42188-4.3008 3.5781-7.3984 8.8594-9.6797 14.621-2.4609 6.1797-4.0195 13.102-5.1016 19.301l-0.10156 0.55859c-3.3203 19-6.8789 39.238-20.82 53.02-3.1406 3.0781-8.1992 3.0391-11.281-0.10156-3.0781-3.1406-3.0391-8.1992 0.10156-11.281 10.262-10.121 13.34-27.82 16.262-44.398l0.10156-0.55859c0.44141-2.5586 0.98047-5.2383 1.6211-8-20.141 15.121-41.941 29.52-65.859 43.699-3.8008 2.2383-8.6992 0.98047-10.941-2.8203-2.2383-3.8008-0.98047-8.6992 2.8203-10.941 23.359-13.859 44.539-27.82 63.98-42.379zm189.02-140.08c-4.2617 3.4805-8.7812 6.6016-13.219 9.6797-8.9219 6.1602-17.5 12.102-21.48 19.879-2 3.9219-6.8008 5.4805-10.719 3.4609-3.9219-2-5.4805-6.8008-3.4609-10.719 5.8203-11.379 16.02-18.422 26.602-25.738 11.621-8.0391 23.801-16.461 27.68-30.898 3.1016-25.059 4.3008-49.641 3.5586-74.539-0.12109-4.3984 3.3398-8.0586 7.7617-8.1797 4.3984-0.12109 8.0586 3.3398 8.1797 7.7617 0.73828 25.641-0.44141 50.82-3.5586 76.359-0.39844 5.1602 0.85938 10.699 2.8984 16.102 2.4219 6.3398 5.8984 12.441 9.2383 17.68l0.30078 0.48047c10.379 16.262 21.461 33.602 20.5 53.078-0.19922 4.3984-3.9414 7.8008-8.3398 7.6016-4.3984-0.19922-7.8008-3.9414-7.6016-8.3398 0.71875-14.48-8.9414-29.602-18-43.781l-0.30078-0.48047c-1.3984-2.1797-2.8203-4.5195-4.1992-6.9414-4.6211 24.699-10.98 50.039-19.039 76.699-1.2812 4.2188-5.7383 6.6211-9.9609 5.3398-4.2188-1.2812-6.6211-5.7383-5.3398-9.9609 7.8398-25.941 14.02-50.539 18.52-74.461zm-583.8 249.7c-2.4805-4.9219-4.5586-10.02-6.6016-15.039-4.0781-10.02-8.0195-19.68-14.762-25.262-3.3984-2.8203-3.8789-7.8594-1.0586-11.262 2.8203-3.3984 7.8594-3.8789 11.262-1.0586 9.8398 8.1406 14.52 19.641 19.379 31.559 5.3398 13.121 10.961 26.879 24.262 33.762l0.5 0.17969c0.42188 0.14062 0.83984 0.28125 1.2617 0.44141l0.21875 0.078125c19.961 6.9805 40 12.621 60.559 16.961 4.3203 0.92188 7.0781 5.1602 6.1602 9.4609-0.92188 4.3203-5.1602 7.0781-9.4609 6.1602-21.141-4.4805-41.82-10.301-62.52-17.539-0.14062-0.039062-0.26172-0.078125-0.39844-0.14062-5.2383-1.9219-11.359-1.9609-17.559-1.0586-6.6992 0.98047-13.422 3.0586-19.262 5.1992l-0.53906 0.19922c-18.102 6.6211-37.422 13.66-56.262 8.5-4.2383-1.1602-6.7617-5.5391-5.6016-9.7812 1.1602-4.2383 5.5391-6.7617 9.7812-5.6016 13.941 3.8203 30.82-2.3398 46.641-8.1211l0.53906-0.19922c2.4414-0.89844 5.0195-1.7812 7.6992-2.6016-23.16-9.8789-46.539-21.559-70.762-35.18-3.8398-2.1602-5.2188-7.0195-3.0586-10.879 2.1602-3.8398 7.0195-5.2188 10.879-3.0586 23.68 13.301 46.379 24.66 68.699 34.238zm215.84 93.68c-5.1406-1.9609-10.102-4.3008-14.98-6.6211-9.8008-4.6406-19.238-9.1016-28-8.6602-4.3984 0.19922-8.1406-3.1992-8.3398-7.6016-0.19922-4.3984 3.1992-8.1406 7.6016-8.3398 12.719-0.64062 23.922 4.6602 35.559 10.16 12.801 6.0586 26.199 12.398 40.66 8.5195 23.219-9.8203 45.078-21.078 66.281-34.16 3.7383-2.3203 8.6602-1.1602 10.961 2.6016 2.3203 3.7383 1.1602 8.6602-2.6016 10.961-21.762 13.422-44.121 24.961-67.738 35.02-4.7383 2.2188-8.9609 6.1016-12.641 10.621-4.2617 5.2188-7.8008 11.32-10.68 16.84l-0.26172 0.51953c-8.8789 17.121-18.359 35.379-35.781 44.32-3.9219 2-8.7188 0.44141-10.719-3.4609-2-3.9219-0.44141-8.7188 3.4609-10.719 12.84-6.5781 21.102-22.52 28.84-37.441l0.26172-0.51953c1.1992-2.3008 2.5-4.7188 3.9414-7.1406-23.699 8.3398-48.82 15.52-75.941 21.859-4.3008 1-8.6016-1.6797-9.6016-5.9609-1-4.3008 1.6797-8.6016 5.9609-9.6016 26.379-6.1797 50.781-13.141 73.738-21.18zm-508.12-380.78c3.0195-4.6016 6.3789-8.9219 9.6992-13.199 6.6406-8.5586 13.059-16.82 14.5-25.379 0.71875-4.3398 4.8398-7.2812 9.1797-6.5586 4.3398 0.71875 7.2812 4.8398 6.5586 9.1797-2.1406 12.621-9.7383 22.422-17.641 32.578-8.6797 11.16-17.762 22.859-17.121 37.762l0.16016 0.82031c0.078125 0.39844 0.16016 0.78125 0.21875 1.1797l0.019531 0.16016c3.9414 20.859 9.0781 41.039 15.578 61 1.3594 4.1992-0.94141 8.6992-5.1211 10.059-4.1992 1.3594-8.6992-0.94141-10.059-5.1211-6.7188-20.621-12.039-41.461-16.102-62.98-0.019532-0.12109-0.058594-0.23828-0.078126-0.35938-0.96094-5.5195-3.9609-10.84-7.8008-15.699-4.1406-5.2383-9.3398-10.039-14.16-14.059l-0.44141-0.35938c-14.781-12.379-30.559-25.578-35.5-44.52-1.1016-4.2617 1.4609-8.6211 5.7188-9.7188 4.2617-1.1016 8.6211 1.4609 9.7188 5.7188 3.6406 13.941 17.422 25.48 30.32 36.281l0.44141 0.35937c1.9805 1.6602 4.0391 3.4609 6.1016 5.3789-3-24.859-4.5391-50.941-4.8789-78.859-0.058594-4.3984 3.4805-8.0195 7.8789-8.0586 4.3984-0.058594 8.0195 3.4805 8.0586 7.8789 0.32031 27 1.8398 52.32 4.7383 76.559zm26.781 233.82c-0.87891-5.4414-1.3398-10.941-1.7812-16.34-0.87891-10.801-1.7383-21.199-6.4609-28.5-2.3984-3.6992-1.3398-8.6406 2.3398-11.039 3.6992-2.3984 8.6406-1.3398 11.039 2.3398 6.9609 10.762 7.9609 23.121 9.0195 35.941 1.1602 14.141 2.3594 28.961 13.02 39.52l0.23828 0.17969c0.42188 0.30078 0.83984 0.62109 1.2617 0.94141 0.078125 0.058594 0.17969 0.14063 0.26172 0.21875 19.461 14.539 39.559 27.398 60.898 38.898 3.8789 2.0781 5.3398 6.9219 3.2617 10.82-2.0781 3.8789-6.9219 5.3398-10.82 3.2617-21.941-11.84-42.699-25.121-62.859-40.219-0.16016-0.10156-0.32031-0.21875-0.48047-0.33984-4.3984-3.3984-10.219-5.2812-16.34-6.2617-6.6797-1.0781-13.738-1.1016-19.98-0.82031l-0.57812 0.019532c-19.262 0.85937-39.82 1.8008-56.219-8.8008-3.7188-2.3789-4.7812-7.3203-2.3984-11.039 2.3789-3.7188 7.3203-4.7812 11.039-2.3984 12.16 7.8594 30.102 7.0586 46.898 6.3008l0.57812-0.019532c2.6016-0.12109 5.3398-0.17969 8.1602-0.16016-19.121-16.379-37.898-34.559-56.922-54.82-3.0195-3.2188-2.8594-8.2617 0.33984-11.281 3.2188-3.0195 8.2617-2.8594 11.281 0.33984 18.578 19.801 36.801 37.461 55.238 53.301zm75.641-630.46c5.5 0.32031 10.941 1.0586 16.301 1.8008 10.738 1.4805 21.121 2.8984 29.281-0.14063 4.1211-1.5391 8.7188 0.55859 10.262 4.6797 1.5391 4.1211-0.55859 8.7188-4.6797 10.262-11.98 4.4609-24.238 2.7617-36.98 1.0195-14.039-1.9414-28.738-3.9609-41.34 4.0781l-0.21875 0.17969c-0.42188 0.37891-0.83984 0.76172-1.2812 1.1211-0.10156 0.10156-0.21875 0.17969-0.33984 0.26172-15.961 13.762-30.801 28.262-44.82 43.84-2.9609 3.2812-8 3.5391-11.281 0.60156-3.2812-2.9609-3.5391-8-0.60156-11.281 14.398-16.02 29.719-30.98 46.301-45.238 0.16016-0.14062 0.30078-0.30078 0.48047-0.42188 4.3008-3.5781 7.3984-8.8594 9.6797-14.621 2.4609-6.1797 4.0195-13.102 5.1016-19.301l0.10156-0.55859c3.3203-19 6.8789-39.238 20.82-53.02 3.1406-3.0781 8.1992-3.0391 11.281 0.10156 3.0781 3.1406 3.0391 8.1992-0.10156 11.281-10.262 10.121-13.34 27.82-16.262 44.398l-0.10156 0.55859c-0.44141 2.5586-0.98047 5.2383-1.6211 8 20.141-15.121 41.941-29.52 65.859-43.699 3.8008-2.2383 8.6992-0.98047 10.941 2.8203 2.2383 3.8008 0.98047 8.6992-2.8203 10.941-23.359 13.859-44.539 27.82-63.98 42.379zm-189.02 140.08c4.2617-3.4805 8.7812-6.6016 13.219-9.6797 8.9219-6.1602 17.5-12.102 21.48-19.879 2-3.9219 6.8008-5.4805 10.719-3.4609 3.9219 2 5.4805 6.8008 3.4609 10.719-5.8203 11.379-16.02 18.422-26.602 25.738-11.621 8.0391-23.801 16.461-27.68 30.898-3.1016 25.059-4.3008 49.641-3.5586 74.539 0.12109 4.3984-3.3398 8.0586-7.7617 8.1797-4.3984 0.12109-8.0586-3.3398-8.1797-7.7617-0.73828-25.641 0.44141-50.82 3.5586-76.359 0.39844-5.1602-0.85938-10.699-2.8984-16.102-2.4219-6.3398-5.8984-12.441-9.2383-17.68l-0.30078-0.48047c-10.379-16.262-21.461-33.602-20.5-53.078 0.19922-4.3984 3.9414-7.8008 8.3398-7.6016 4.3984 0.19922 7.8008 3.9414 7.6016 8.3398-0.71875 14.48 8.9414 29.602 18 43.781l0.30078 0.48047c1.3984 2.1797 2.8203 4.5195 4.1992 6.9414 4.6211-24.699 10.98-50.039 19.039-76.699 1.2812-4.2188 5.7383-6.6211 9.9609-5.3398 4.2188 1.2812 6.6211 5.7383 5.3398 9.9609-7.8398 25.941-14.02 50.539-18.52 74.461zm367.96-343.36c5.1406 1.9609 10.102 4.3008 14.98 6.6211 9.8008 4.6406 19.238 9.1016 28 8.6602 4.3984-0.19922 8.1406 3.1992 8.3398 7.6016 0.19922 4.3984-3.1992 8.1406-7.6016 8.3398-12.719 0.64063-23.922-4.6602-35.559-10.16-12.801-6.0586-26.199-12.398-40.66-8.5195-23.219 9.8203-45.078 21.078-66.281 34.16-3.7383 2.3203-8.6602 1.1602-10.961-2.6016-2.3203-3.7383-1.1602-8.6602 2.6016-10.961 21.762-13.422 44.121-24.961 67.738-35.02 4.7383-2.2188 8.9609-6.1016 12.641-10.621 4.2617-5.2188 7.8008-11.32 10.68-16.84l0.26172-0.5c8.8789-17.121 18.359-35.379 35.781-44.32 3.9219-2 8.7188-0.44141 10.719 3.4609 2 3.9219 0.44141 8.7188-3.4609 10.719-12.84 6.5781-21.102 22.52-28.84 37.441l-0.26172 0.5c-1.1992 2.3008-2.5 4.7188-3.9414 7.1406 23.699-8.3398 48.82-15.52 75.941-21.859 4.3008-1 8.6016 1.6797 9.6016 5.9609 1 4.3008-1.6797 8.6016-5.9609 9.6016-26.379 6.1797-50.781 13.141-73.738 21.18z"/>
+
</svg>
+
</div>
+2 -1
templates/home.latte
···
<div class="homeHeader">
You're viewing <a href="{$feedInfo->url}">{$feedInfo->title}</a>. <a href="/login">Log in</a> to set your own home feed.
</div>
<div class="postsList" data-uri="{$feedAtUri}" data-cursor="{$cursor}">
-
{include '_partials/refreshbar.latte', feedType: 'feed'}
{include '_partials/feedPosts.latte', posts: $posts}
</div>
{/block}
···
<div class="homeHeader">
You're viewing <a href="{$feedInfo->url}">{$feedInfo->title}</a>. <a href="/login">Log in</a> to set your own home feed.
</div>
+
{include '_partials/refreshbar.latte', feedType: 'feed'}
+
{include '_partials/spinner.latte'}
<div class="postsList" data-uri="{$feedAtUri}" data-cursor="{$cursor}">
{include '_partials/feedPosts.latte', posts: $posts}
</div>
{/block}