From d6bc8d8b6ceaf6aa376023c14e5091217ce69eee Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 2 Dec 2021 15:03:52 -0600
Subject: [PATCH] PullToRefresh: use iOS style spinner

---
 app/soapbox/components/loading_spinner.js | Bin 0 -> 428 bytes
 app/soapbox/components/pull_to_refresh.js | Bin 1085 -> 1167 bytes
 app/styles/loading.scss                   | 111 ++++++++++++++++++++++
 3 files changed, 111 insertions(+)
 create mode 100644 app/soapbox/components/loading_spinner.js

diff --git a/app/soapbox/components/loading_spinner.js b/app/soapbox/components/loading_spinner.js
new file mode 100644
index 0000000000000000000000000000000000000000..a632454dbeaf1068713580a9e8a107a82d220b5d
GIT binary patch
literal 428
zcmZ8d+fIZq6nyVj%o~^NQZH|;kQkp#Of=#TR9coMg*I(hMZ&+^!mf$Fozt1=%p98M
z1Uck$1Lr3tpfuxhJi-|{j=~lZee{XLpq*C}9-3wc#+mVgqqBM_(R*)PN$FWyNKISk
zXi!oj2cxaWt6;5P=}2sxlfwmivD&;%Mz}L<!oK(MA#g~mN9Xahg=)4;sF2QZ@>_)I
z_6kdeszyqHJ1#%aD&}03DDL*>63N!BnrD1U?)!2T@6Zc*?ESW3S?cfuFyC9tru6zI
zD>|uEniT^xsk~T3%4$P5dX_EGm<H#XWFhh2tVOJ|)vGWEW{h3pw{$U{hIe6iWC>F7
PwH}L$j-Ay1)(7$fW=n|i

literal 0
HcmV?d00001

diff --git a/app/soapbox/components/pull_to_refresh.js b/app/soapbox/components/pull_to_refresh.js
index 9ff1e6c889302d38507f40a1d1faa19240548842..f138e14ae30d5618f924a64f38bbade24b52b5c6 100644
GIT binary patch
delta 120
zcmdnX(a$-d!Y(tnAit<Y!6!d4B{MHQxF9nxFSSS^ttdZNLA^LXu^=hGLO(els3<Qr
zucTN%2cj;%7@}}vDG#%Z4VvcS%&Jt|YGZ?11%128UCb&>X6BPOGRrernohpVoCN^9
C94mPM

delta 66
zcmeC@+{-bcV&hIuX3o;Ql+?7$ywsG*_n1{w4UG+IxfGxvH?bn1G$+R;zdX++v$!NN
PFFDn=8mMBjDoYjs<#QE>

diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index c26ec70feb..b893128ae7 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -229,3 +229,114 @@
 .ptr__children {
   overflow: visible !important;
 }
+
+.ptr .lds-spinner {
+  width: 40px;
+  height: 40px;
+}
+
+.ptr__pull-down {
+  transform: translateY(10px);
+}
+
+/**
+ * iOS style loading spinner.
+ * Adapted from: https://loading.io/css/
+ * With some help scaling it: https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
+ */
+.lds-spinner {
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+
+  div {
+    position: absolute;
+    transform-origin: 50% 50%;
+    animation: lds-spinner 1.2s linear infinite;
+    width: 100%;
+    height: 100%;
+
+    &::after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      top: 3.75%;
+      left: 46.25%;
+      width: 7.5%;
+      height: 22.5%;
+      border-radius: 20%;
+      background: var(--primary-text-color);
+    }
+
+    &:nth-child(1) {
+      transform: rotate(0deg);
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(2) {
+      transform: rotate(30deg);
+      animation-delay: -1s;
+    }
+
+    &:nth-child(3) {
+      transform: rotate(60deg);
+      animation-delay: -0.9s;
+    }
+
+    &:nth-child(4) {
+      transform: rotate(90deg);
+      animation-delay: -0.8s;
+    }
+
+    &:nth-child(5) {
+      transform: rotate(120deg);
+      animation-delay: -0.7s;
+    }
+
+    &:nth-child(6) {
+      transform: rotate(150deg);
+      animation-delay: -0.6s;
+    }
+
+    &:nth-child(7) {
+      transform: rotate(180deg);
+      animation-delay: -0.5s;
+    }
+
+    &:nth-child(8) {
+      transform: rotate(210deg);
+      animation-delay: -0.4s;
+    }
+
+    &:nth-child(9) {
+      transform: rotate(240deg);
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(10) {
+      transform: rotate(270deg);
+      animation-delay: -0.2s;
+    }
+
+    &:nth-child(11) {
+      transform: rotate(300deg);
+      animation-delay: -0.1s;
+    }
+
+    &:nth-child(12) {
+      transform: rotate(330deg);
+      animation-delay: 0s;
+    }
+  }
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}