From 1db4cd60d42bb9cd5f9d644b3e9158860b3f596a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 11 Oct 2021 15:52:16 -0500
Subject: [PATCH] PlaceholderStatus: display wiping animation over post

---
 app/styles/basics.scss | 31 +++++++++++++++++++++++++++++++
 app/styles/themes.scss | 10 ++++++++--
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 26f98bbf8..f53400e54 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -206,6 +206,32 @@ noscript {
 }
 
 .placeholder-status {
+  position: relative;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+      90deg,
+      hsla(var(--foreground-color_hsl), 0) 0%,
+      hsla(var(--foreground-color_hsl), 0) 25%,
+      var(--foreground-color) 50%,
+      hsla(var(--foreground-color_hsl), 0) 70%,
+      hsla(var(--foreground-color_hsl), 0) 100%
+    );
+    background-size: 200%;
+    animation: placeholder-pulse 2s infinite;
+    z-index: 1;
+    opacity: 0.9;
+  }
+
   .status__display-name strong,
   .status__content {
     letter-spacing: -1px;
@@ -213,3 +239,8 @@ noscript {
     opacity: 0.1;
   }
 }
+
+@keyframes placeholder-pulse {
+  0% { background-position-x: 200%; }
+  100% { background-position-x: 0; }
+}
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
index 2369c9f6a..e1d328b4f 100644
--- a/app/styles/themes.scss
+++ b/app/styles/themes.scss
@@ -31,6 +31,7 @@ body,
   --accent-color: hsl(var(--accent-color_hsl));
   --primary-text-color: hsl(var(--primary-text-color_hsl));
   --background-color: hsl(var(--background-color_hsl));
+  --foreground-color: hsl(var(--foreground-color_hsl));
   --warning-color: hsla(var(--warning-color_hsl));
 
   // Meta-variables
@@ -38,6 +39,7 @@ body,
   --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
   --primary-text-color_hsl: var(--primary-text-color_h), var(--primary-text-color_s), var(--primary-text-color_l);
   --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
+  --foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
   --warning-color_hsl: var(--warning-color_h), var(--warning-color_s), var(--warning-color_l);
   --accent-color_h: calc(var(--brand-color_h) - 15);
   --accent-color_s: 86%;
@@ -59,7 +61,6 @@ body,
 
 .theme-mode-light {
   // Primary variables
-  --foreground-color: #fff;
   --highlight-text-color: hsl(
     var(--brand-color_h),
     var(--brand-color_s),
@@ -74,6 +75,9 @@ body,
   --background-color_h: 0;
   --background-color_s: 0%;
   --background-color_l: 94.9%;
+  --foreground-color_h: 0;
+  --foreground-color_s: 0%;
+  --foreground-color_l: 100%;
   --warning-color_h: 0;
   --warning-color_s: 100%;
   --warning-color_l: 66%;
@@ -88,7 +92,6 @@ body,
 
 .theme-mode-dark {
   // Primary variables
-  --foreground-color: #222;
   --highlight-text-color: hsl(
     var(--brand-color_h),
     var(--brand-color_s),
@@ -103,6 +106,9 @@ body,
   --background-color_h: 0;
   --background-color_s: 0%;
   --background-color_l: 20%;
+  --foreground-color_h: 0;
+  --foreground-color_s: 0%;
+  --foreground-color_l: 13%;
   --warning-color_h: 0;
   --warning-color_s: 100%;
   --warning-color_l: 66%;