From f8546bd21b1043eeb582dda3e31c8a8d4e23bff8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wladislav=20=E3=83=B4=E3=83=A9=E3=83=89=20Artsimovich?= Date: Fri, 29 Nov 2024 11:26:01 +0900 Subject: [PATCH 1/2] Loading Spinner --- src/stylesheets/utterances.scss | 179 ++++++++++++++++++++++++++++++++ src/utterances.html | 19 +++- src/utterances.ts | 14 ++- 3 files changed, 209 insertions(+), 3 deletions(-) diff --git a/src/stylesheets/utterances.scss b/src/stylesheets/utterances.scss index 6c339851..509a7f06 100644 --- a/src/stylesheets/utterances.scss +++ b/src/stylesheets/utterances.scss @@ -35,4 +35,183 @@ body { textarea[disabled] { cursor: not-allowed; +} + +#loadingSpinner { + position: relative; + width: 234px; + height: 28px; + margin: auto; +} + +.fountainG { + position: absolute; + top: 0; + background-color: transparent; + width: 28px; + height: 28px; + animation-name: bounce_fountainG; + -o-animation-name: bounce_fountainG; + -ms-animation-name: bounce_fountainG; + -webkit-animation-name: bounce_fountainG; + -moz-animation-name: bounce_fountainG; + animation-duration: 1.5s; + -o-animation-duration: 1.5s; + -ms-animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + -moz-animation-duration: 1.5s; + animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-direction: normal; + -o-animation-direction: normal; + -ms-animation-direction: normal; + -webkit-animation-direction: normal; + -moz-animation-direction: normal; + transform: scale(.3); + -o-transform: scale(.3); + -ms-transform: scale(.3); + -webkit-transform: scale(.3); + -moz-transform: scale(.3); + border-radius: 19px; + -o-border-radius: 19px; + -ms-border-radius: 19px; + -webkit-border-radius: 19px; + -moz-border-radius: 19px; +} + +#fountainG_1 { + left: 0; + animation-delay: 0.6s; + -o-animation-delay: 0.6s; + -ms-animation-delay: 0.6s; + -webkit-animation-delay: 0.6s; + -moz-animation-delay: 0.6s; +} + +#fountainG_2 { + left: 29px; + animation-delay: 0.75s; + -o-animation-delay: 0.75s; + -ms-animation-delay: 0.75s; + -webkit-animation-delay: 0.75s; + -moz-animation-delay: 0.75s; +} + +#fountainG_3 { + left: 58px; + animation-delay: 0.9s; + -o-animation-delay: 0.9s; + -ms-animation-delay: 0.9s; + -webkit-animation-delay: 0.9s; + -moz-animation-delay: 0.9s; +} + +#fountainG_4 { + left: 88px; + animation-delay: 1.05s; + -o-animation-delay: 1.05s; + -ms-animation-delay: 1.05s; + -webkit-animation-delay: 1.05s; + -moz-animation-delay: 1.05s; +} + +#fountainG_5 { + left: 117px; + animation-delay: 1.2s; + -o-animation-delay: 1.2s; + -ms-animation-delay: 1.2s; + -webkit-animation-delay: 1.2s; + -moz-animation-delay: 1.2s; +} + +#fountainG_6 { + left: 146px; + animation-delay: 1.35s; + -o-animation-delay: 1.35s; + -ms-animation-delay: 1.35s; + -webkit-animation-delay: 1.35s; + -moz-animation-delay: 1.35s; +} + +#fountainG_7 { + left: 175px; + animation-delay: 1.5s; + -o-animation-delay: 1.5s; + -ms-animation-delay: 1.5s; + -webkit-animation-delay: 1.5s; + -moz-animation-delay: 1.5s; +} + +#fountainG_8 { + left: 205px; + animation-delay: 1.64s; + -o-animation-delay: 1.64s; + -ms-animation-delay: 1.64s; + -webkit-animation-delay: 1.64s; + -moz-animation-delay: 1.64s; +} + + + +@keyframes bounce_fountainG { + 0% { + transform: scale(1); + background-color: $text-blue; + } + + 100% { + transform: scale(.3); + background-color: transparent; + } +} + +@-o-keyframes bounce_fountainG { + 0% { + -o-transform: scale(1); + background-color: $text-blue; + } + + 100% { + -o-transform: scale(.3); + background-color: transparent; + } +} + +@-ms-keyframes bounce_fountainG { + 0% { + -ms-transform: scale(1); + background-color: $text-blue; + } + + 100% { + -ms-transform: scale(.3); + background-color: transparent; + } +} + +@-webkit-keyframes bounce_fountainG { + 0% { + -webkit-transform: scale(1); + background-color: $text-blue; + } + + 100% { + -webkit-transform: scale(.3); + background-color: transparent; + } +} + +@-moz-keyframes bounce_fountainG { + 0% { + -moz-transform: scale(1); + background-color: $text-blue; + } + + 100% { + -moz-transform: scale(.3); + background-color: transparent; + } } \ No newline at end of file diff --git a/src/utterances.html b/src/utterances.html index 2f569918..1d39eb76 100644 --- a/src/utterances.html +++ b/src/utterances.html @@ -12,5 +12,22 @@ - + + + + diff --git a/src/utterances.ts b/src/utterances.ts index 588bf08b..564049ec 100644 --- a/src/utterances.ts +++ b/src/utterances.ts @@ -29,17 +29,25 @@ function loadIssue(): Promise { } async function bootstrap() { + /* Enable the loading spinner */ + await loadTheme(page.theme, page.origin); + document.getElementById('loadingSpinner')!.style.display = 'block'; + scheduleMeasure(); + await loadToken(); // tslint:disable-next-line:prefer-const let [issue, user] = await Promise.all([ loadIssue(), - loadUser(), - loadTheme(page.theme, page.origin) + loadUser() ]); startMeasuring(page.origin); const timeline = new TimelineComponent(user, issue); + + /* Disable the loading spinner */ + document.getElementById('loadingSpinner')!.style.display = 'none'; + document.body.appendChild(timeline.element); if (issue && issue.comments > 0) { @@ -73,6 +81,8 @@ async function bootstrap() { const newCommentComponent = new NewCommentComponent(user, submit); timeline.element.appendChild(newCommentComponent.element); + + } bootstrap(); From 7c2f2de32231a6124577cd3c4776b4b7f86b9737 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wladislav=20=E3=83=B4=E3=83=A9=E3=83=89=20Artsimovich?= Date: Fri, 29 Nov 2024 12:04:29 +0900 Subject: [PATCH 2/2] Clean up formatting for cleaner git-diff --- src/stylesheets/utterances.scss | 256 ++++++++++++++++---------------- src/utterances.html | 2 +- src/utterances.ts | 2 - 3 files changed, 129 insertions(+), 131 deletions(-) diff --git a/src/stylesheets/utterances.scss b/src/stylesheets/utterances.scss index 509a7f06..6d7dd297 100644 --- a/src/stylesheets/utterances.scss +++ b/src/stylesheets/utterances.scss @@ -38,180 +38,180 @@ textarea[disabled] { } #loadingSpinner { - position: relative; - width: 234px; - height: 28px; - margin: auto; + position: relative; + width: 234px; + height: 28px; + margin: auto; } .fountainG { - position: absolute; - top: 0; - background-color: transparent; - width: 28px; - height: 28px; - animation-name: bounce_fountainG; - -o-animation-name: bounce_fountainG; - -ms-animation-name: bounce_fountainG; - -webkit-animation-name: bounce_fountainG; - -moz-animation-name: bounce_fountainG; - animation-duration: 1.5s; - -o-animation-duration: 1.5s; - -ms-animation-duration: 1.5s; - -webkit-animation-duration: 1.5s; - -moz-animation-duration: 1.5s; - animation-iteration-count: infinite; - -o-animation-iteration-count: infinite; - -ms-animation-iteration-count: infinite; - -webkit-animation-iteration-count: infinite; - -moz-animation-iteration-count: infinite; - animation-direction: normal; - -o-animation-direction: normal; - -ms-animation-direction: normal; - -webkit-animation-direction: normal; - -moz-animation-direction: normal; - transform: scale(.3); - -o-transform: scale(.3); - -ms-transform: scale(.3); - -webkit-transform: scale(.3); - -moz-transform: scale(.3); - border-radius: 19px; - -o-border-radius: 19px; - -ms-border-radius: 19px; - -webkit-border-radius: 19px; - -moz-border-radius: 19px; + position: absolute; + top: 0; + background-color: transparent; + width: 28px; + height: 28px; + animation-name: bounce_fountainG; + -o-animation-name: bounce_fountainG; + -ms-animation-name: bounce_fountainG; + -webkit-animation-name: bounce_fountainG; + -moz-animation-name: bounce_fountainG; + animation-duration: 1.5s; + -o-animation-duration: 1.5s; + -ms-animation-duration: 1.5s; + -webkit-animation-duration: 1.5s; + -moz-animation-duration: 1.5s; + animation-iteration-count: infinite; + -o-animation-iteration-count: infinite; + -ms-animation-iteration-count: infinite; + -webkit-animation-iteration-count: infinite; + -moz-animation-iteration-count: infinite; + animation-direction: normal; + -o-animation-direction: normal; + -ms-animation-direction: normal; + -webkit-animation-direction: normal; + -moz-animation-direction: normal; + transform: scale(.3); + -o-transform: scale(.3); + -ms-transform: scale(.3); + -webkit-transform: scale(.3); + -moz-transform: scale(.3); + border-radius: 19px; + -o-border-radius: 19px; + -ms-border-radius: 19px; + -webkit-border-radius: 19px; + -moz-border-radius: 19px; } #fountainG_1 { - left: 0; - animation-delay: 0.6s; - -o-animation-delay: 0.6s; - -ms-animation-delay: 0.6s; - -webkit-animation-delay: 0.6s; - -moz-animation-delay: 0.6s; + left: 0; + animation-delay: 0.6s; + -o-animation-delay: 0.6s; + -ms-animation-delay: 0.6s; + -webkit-animation-delay: 0.6s; + -moz-animation-delay: 0.6s; } #fountainG_2 { - left: 29px; - animation-delay: 0.75s; - -o-animation-delay: 0.75s; - -ms-animation-delay: 0.75s; - -webkit-animation-delay: 0.75s; - -moz-animation-delay: 0.75s; + left: 29px; + animation-delay: 0.75s; + -o-animation-delay: 0.75s; + -ms-animation-delay: 0.75s; + -webkit-animation-delay: 0.75s; + -moz-animation-delay: 0.75s; } #fountainG_3 { - left: 58px; - animation-delay: 0.9s; - -o-animation-delay: 0.9s; - -ms-animation-delay: 0.9s; - -webkit-animation-delay: 0.9s; - -moz-animation-delay: 0.9s; + left: 58px; + animation-delay: 0.9s; + -o-animation-delay: 0.9s; + -ms-animation-delay: 0.9s; + -webkit-animation-delay: 0.9s; + -moz-animation-delay: 0.9s; } #fountainG_4 { - left: 88px; - animation-delay: 1.05s; - -o-animation-delay: 1.05s; - -ms-animation-delay: 1.05s; - -webkit-animation-delay: 1.05s; - -moz-animation-delay: 1.05s; + left: 88px; + animation-delay: 1.05s; + -o-animation-delay: 1.05s; + -ms-animation-delay: 1.05s; + -webkit-animation-delay: 1.05s; + -moz-animation-delay: 1.05s; } #fountainG_5 { - left: 117px; - animation-delay: 1.2s; - -o-animation-delay: 1.2s; - -ms-animation-delay: 1.2s; - -webkit-animation-delay: 1.2s; - -moz-animation-delay: 1.2s; + left: 117px; + animation-delay: 1.2s; + -o-animation-delay: 1.2s; + -ms-animation-delay: 1.2s; + -webkit-animation-delay: 1.2s; + -moz-animation-delay: 1.2s; } #fountainG_6 { - left: 146px; - animation-delay: 1.35s; - -o-animation-delay: 1.35s; - -ms-animation-delay: 1.35s; - -webkit-animation-delay: 1.35s; - -moz-animation-delay: 1.35s; + left: 146px; + animation-delay: 1.35s; + -o-animation-delay: 1.35s; + -ms-animation-delay: 1.35s; + -webkit-animation-delay: 1.35s; + -moz-animation-delay: 1.35s; } #fountainG_7 { - left: 175px; - animation-delay: 1.5s; - -o-animation-delay: 1.5s; - -ms-animation-delay: 1.5s; - -webkit-animation-delay: 1.5s; - -moz-animation-delay: 1.5s; + left: 175px; + animation-delay: 1.5s; + -o-animation-delay: 1.5s; + -ms-animation-delay: 1.5s; + -webkit-animation-delay: 1.5s; + -moz-animation-delay: 1.5s; } #fountainG_8 { - left: 205px; - animation-delay: 1.64s; - -o-animation-delay: 1.64s; - -ms-animation-delay: 1.64s; - -webkit-animation-delay: 1.64s; - -moz-animation-delay: 1.64s; + left: 205px; + animation-delay: 1.64s; + -o-animation-delay: 1.64s; + -ms-animation-delay: 1.64s; + -webkit-animation-delay: 1.64s; + -moz-animation-delay: 1.64s; } @keyframes bounce_fountainG { - 0% { - transform: scale(1); - background-color: $text-blue; - } + 0% { + transform: scale(1); + background-color: $text-blue; + } - 100% { - transform: scale(.3); - background-color: transparent; - } + 100% { + transform: scale(.3); + background-color: transparent; + } } @-o-keyframes bounce_fountainG { - 0% { - -o-transform: scale(1); - background-color: $text-blue; - } + 0% { + -o-transform: scale(1); + background-color: $text-blue; + } - 100% { - -o-transform: scale(.3); - background-color: transparent; - } + 100% { + -o-transform: scale(.3); + background-color: transparent; + } } @-ms-keyframes bounce_fountainG { - 0% { - -ms-transform: scale(1); - background-color: $text-blue; - } + 0% { + -ms-transform: scale(1); + background-color: $text-blue; + } - 100% { - -ms-transform: scale(.3); - background-color: transparent; - } + 100% { + -ms-transform: scale(.3); + background-color: transparent; + } } @-webkit-keyframes bounce_fountainG { - 0% { - -webkit-transform: scale(1); - background-color: $text-blue; - } + 0% { + -webkit-transform: scale(1); + background-color: $text-blue; + } - 100% { - -webkit-transform: scale(.3); - background-color: transparent; - } + 100% { + -webkit-transform: scale(.3); + background-color: transparent; + } } @-moz-keyframes bounce_fountainG { - 0% { - -moz-transform: scale(1); - background-color: $text-blue; - } - - 100% { - -moz-transform: scale(.3); - background-color: transparent; - } + 0% { + -moz-transform: scale(1); + background-color: $text-blue; + } + + 100% { + -moz-transform: scale(.3); + background-color: transparent; + } } \ No newline at end of file diff --git a/src/utterances.html b/src/utterances.html index 1d39eb76..932e7f03 100644 --- a/src/utterances.html +++ b/src/utterances.html @@ -17,7 +17,7 @@ a project by Timur Gafforov, Timur Yerzin and Avraam Makhmudov -->