Use GitHub's Mona loading animation

giscus · Apr 8, 2022 · b76231b · b76231b
1 parent dee22b7
commit b76231b
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 2 deletions.
diff --git a/components/Giscus.tsx b/components/Giscus.tsx
@@ -75,6 +75,15 @@ export default function Giscus({ onDiscussionCreateRequest, onError }: IGiscusPr
     (data.isRateLimited && !token) ||
     (!data.isLoading && !data.isLocked && (!data.error || (data.isNotFound && !number)));
 
+  if (data.isLoading) {
+    return (
+      <div className="gsc-loading">
+        <div className="gsc-loading-image" />
+        <span className="gsc-loading-text color-fg-muted">{t('loadingComments')}</span>
+      </div>
+    );
+  }
+
   return (
     <div className="color-text-primary gsc-main">
       {reactionsEnabled && !data.isLoading && (shouldCreateDiscussion || !data.error) ? (
@@ -112,8 +121,6 @@ export default function Giscus({ onDiscussionCreateRequest, onError }: IGiscusPr
                 t('comments', { count: 0 })
               ) : data.error && !data.backData ? (
                 t('genericError', { message: data.error?.message || '' })
-              ) : data.isLoading ? (
-                t('loadingComments')
               ) : (
                 <a
                   href={data.discussion.url}

diff --git a/styles/base.css b/styles/base.css
@@ -399,6 +399,20 @@ img.emoji {
 
 /*! giscus-specific styles */
 
+.gsc-loading {
+  @apply flex flex-col items-center gap-4;
+}
+
+.gsc-loading-image {
+  @apply w-12 h-12 bg-contain bg-no-repeat;
+
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}
+
+.gsc-loading-text {
+  @apply text-sm;
+}
+
 .gsc-tl-line {
   @apply w-[2px] flex-shrink-0 absolute left-[30px] h-full top-0;
 

diff --git a/styles/themes/custom_example.css b/styles/themes/custom_example.css
@@ -119,3 +119,7 @@ main .pagination-loader-container {
 .gsc-homepage-bg {
   background-color: #15202b;
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dimmed.gif");
+}
diff --git a/styles/themes/dark.css b/styles/themes/dark.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}
diff --git a/styles/themes/dark_dimmed.css b/styles/themes/dark_dimmed.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dimmed.gif");
+}
diff --git a/styles/themes/dark_high_contrast.css b/styles/themes/dark_high_contrast.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}
diff --git a/styles/themes/dark_protanopia.css b/styles/themes/dark_protanopia.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}
diff --git a/styles/themes/light.css b/styles/themes/light.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}
diff --git a/styles/themes/light_high_contrast.css b/styles/themes/light_high_contrast.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}
diff --git a/styles/themes/light_protanopia.css b/styles/themes/light_protanopia.css
@@ -87,3 +87,7 @@ main {
 main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}
diff --git a/styles/themes/preferred_color_scheme.css b/styles/themes/preferred_color_scheme.css
@@ -89,6 +89,10 @@ main .pagination-loader-container {
   background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
 }
 
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
+}
+
 /*! Dark mode */
 @media (prefers-color-scheme: dark) {
   /*! MIT License
@@ -181,4 +185,8 @@ main .pagination-loader-container {
   main .pagination-loader-container {
     background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
   }
+
+  main .gsc-loading-image {
+    background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+  }
 }
diff --git a/styles/themes/transparent_dark.css b/styles/themes/transparent_dark.css
@@ -109,3 +109,7 @@ main .pagination-loader-container {
     background-position: 2% 0%;
   }
 }
+
+main .gsc-loading-image {
+  background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
+}