Merge pull request #5218 from fjordllc/feature/display_loading_github…

…_grass_on_dashboard ダッシュボードのGithubの草にローディング中の表示がされるようにした
fjordllc · Jul 17, 2022 · 7c19c62 · 7c19c62
2 parents 111ed83 + a8e12b1
commit 7c19c62
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git a/app/assets/stylesheets/atoms/_a-placeholder.sass b/app/assets/stylesheets/atoms/_a-placeholder.sass
@@ -1,6 +1,6 @@
 @keyframes loadingNow
   0%
-    opacity: .5
+    opacity: .4
   100%
     opacity: 1
 

diff --git a/app/assets/stylesheets/blocks/user/_user-grass.sass b/app/assets/stylesheets/blocks/user/_user-grass.sass
@@ -2,7 +2,8 @@
   padding: 1rem
   +media-breakpoint-down(sm)
     padding: .75rem
-  svg
+  svg,
+  .user-grass__image
     font-size: .625rem
     max-width: 100%
     +margin(vertical, -1.75rem)
@@ -12,6 +13,8 @@
       +margin(vertical, 0)
     +media-breakpoint-up(lg)
       +margin(vertical, -.75rem)
+    &.is-loading
+      animation: loadingNow .5s ease infinite alternate
 
 .user-grass-nav
   font-size: .875rem

diff --git a/app/javascript/github_grass.js b/app/javascript/github_grass.js
@@ -19,6 +19,11 @@ document.addEventListener('DOMContentLoaded', () => {
         .then((text) => {
           grass.innerHTML = text
         })
+        .then(() => {
+          document
+            .querySelector('.js-github-grass + .js-user-grass__loading')
+            .remove()
+        })
         .catch((error) => {
           console.warn(error)
         })

diff --git a/app/views/users/_github_grass.html.slim b/app/views/users/_github_grass.html.slim
@@ -1,6 +1,8 @@
 .a-card
   .card-header.is-sm
     h2.card-header__title GitHub
+
   .user-grass
     = link_to user_github_url(user), target: '_blank', rel: 'noopener', class: 'user-grass__link' do
       .js-github-grass(data-name="#{user.github_account}")
+      = image_tag('loading/github-grass-loading.svg', class: 'user-grass__image is-loading js-user-grass__loading')