Publisher status refresh now shows confirmation

src/components/icons/checkmark-circle-l.tsx

@@ -0,0 +1,16 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY MANUALLY
+/* tslint:disable */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+// Direct access to SVG
+export const Graphic = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 21.75c-5.385 0-9.75-4.365-9.75-9.75S6.615 2.25 12 2.25s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75zm0-1.5a8.25 8.25 0 1 0 0-16.5 8.25 8.25 0 0 0 0 16.5zm-3.545-7.132l2.28 1.737 3.594-7.19a.75.75 0 1 1 1.342.67l-4 8a.75.75 0 0 1-1.126.262l-3-2.286a.75.75 0 1 1 .91-1.193z'
+        />
+    </svg>
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/checkmark-circle-r.tsx

@@ -0,0 +1,16 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY MANUALLY
+/* tslint:disable */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+// Direct access to SVG
+export const Graphic = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-3.394-7.081l2.04 1.554 3.46-6.92a1 1 0 0 1 1.788.894l-4 8a1 1 0 0 1-1.5.348l-3-2.285a1 1 0 1 1 1.212-1.591z'
+        />
+    </svg>
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/checkmark-circle-s.tsx

@@ -0,0 +1,16 @@
+// THIS FILE IS AUTOGENERATED, DO NOT MODIFY MANUALLY
+/* tslint:disable */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+* License. v. 2.0. If a copy of the MPL was not distributed with this file.
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
+import * as React from 'react'
+import GenerateComponentForGraphic from './template'
+// Direct access to SVG
+export const Graphic = (
+    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>
+        <path d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-3.394-9.081a1 1 0 0 0-1.212 1.59l3 2.286a1 1 0 0 0 1.5-.348l4-8a1 1 0 0 0-1.788-.894l-3.46 6.92-2.04-1.554z'
+        />
+    </svg>
+)
+// Styled Component for SVG
+export default GenerateComponentForGraphic(Graphic)

src/components/icons/index.tsx

@@ -43,6 +43,9 @@ export const CaratStrongUpIcon = RotatedIconComponent(CaratStrongIcon, 180)
 export const CaratStrongDownIcon = RotatedIconComponent(CaratStrongIcon, 0)
 export { default as CheckCircleIcon } from './check-circle'
 export { default as CheckIcon } from './check'
+export { default as CheckmarkCircleL } from './checkmark-circle-l'
+export { default as CheckmarkCircleS } from './checkmark-circle-s'
+export { default as CheckmarkCircleR } from './checkmark-circle-r'
 export { default as ClipboardOIcon } from './clipboard-o'
 export { default as CloseCircleOIcon } from './close-circle-o'
 export { default as CloseCircleIcon } from './close-circle'

src/features/rewards/profile/index.tsx

@@ -13,15 +13,23 @@ import {
   StyledTitle,
   StyledProvider,
   StyledProviderWrap,
+  StyledProviderWrapRefreshing,
+  StyledProviderWrapRefreshFinished,
   StyledInlineVerified,
   StyledVerifiedText,
   StyledInlineUnVerified,
   StyledVerifiedCheckLink,
+  StyledVerifiedCheckNoLink,
+  StyledRefreshCheckOverlayFinished,
   StyledRefresh,
+  StyledRefreshLoaderFinished,
+  StyledRefreshOverlay,
+  StyledRefreshOverlayFinished,
+  StyledRefreshFinished,
   StyledVerifiedDivider
 } from './style'
 import { getLocale } from '../../../helpers'
-import { VerifiedSIcon, UnVerifiedSIcon, LoaderIcon } from '../../../components/icons'
+import { VerifiedSIcon, UnVerifiedSIcon, LoaderIcon, CheckmarkCircleS } from '../../../components/icons'
 
 export type Provider = 'twitter' | 'youtube' | 'twitch'
 
@@ -97,6 +105,7 @@ export default class Profile extends React.PureComponent<Props, {}> {
             ) : null}
           </StyledTitleWrap>
           {verified && type === 'big' ? (
+            !refreshingPublisher && !publisherRefreshed ?
             <StyledProviderWrap>
               <StyledInlineVerified>
                 <VerifiedSIcon />
@@ -105,7 +114,29 @@ export default class Profile extends React.PureComponent<Props, {}> {
                 {getLocale('verifiedPublisher')}
               </StyledVerifiedText>
             </StyledProviderWrap>
+            :
+            <>
+              <StyledProviderWrapRefreshFinished>
+                <StyledInlineVerified>
+                  <VerifiedSIcon />
+                </StyledInlineVerified>{' '}
+                <StyledVerifiedText>
+                  {getLocale('verifiedPublisher')}
+                </StyledVerifiedText>
+              </StyledProviderWrapRefreshFinished>
+              <StyledRefreshOverlayFinished>
+                <StyledRefreshLoaderFinished>
+                  <LoaderIcon />
+                </StyledRefreshLoaderFinished>
+              </StyledRefreshOverlayFinished>
+              <StyledRefreshCheckOverlayFinished>
+                <StyledRefreshFinished>
+                  <CheckmarkCircleS />
+                </StyledRefreshFinished>
+              </StyledRefreshCheckOverlayFinished>
+            </>
           ) : showUnVerifiedHelpIcon ? (
+            !publisherRefreshed && !refreshingPublisher ?
             <StyledProviderWrap>
               <StyledInlineUnVerified>
                 <UnVerifiedSIcon />
@@ -114,19 +145,55 @@ export default class Profile extends React.PureComponent<Props, {}> {
                 {getLocale('unVerifiedPublisher')}
               </StyledVerifiedText>
               <StyledVerifiedDivider />
-              {
-                !publisherRefreshed ?
-                  refreshingPublisher ?
-                    <StyledRefresh>
-                      <LoaderIcon />
-                    </StyledRefresh>
-                    : <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
-                      {getLocale('unVerifiedCheck')}
-                    </StyledVerifiedCheckLink>
-                  :
-                  null
-              }
+              <StyledVerifiedCheckLink onClick={onRefreshPublisher}>
+                {getLocale('unVerifiedCheck')}
+              </StyledVerifiedCheckLink>
             </StyledProviderWrap>
+            : !publisherRefreshed && refreshingPublisher ?
+            <>
+              <StyledProviderWrapRefreshing>
+                <StyledInlineUnVerified>
+                  <UnVerifiedSIcon />
+                </StyledInlineUnVerified>{' '}
+                <StyledVerifiedText>
+                  {getLocale('unVerifiedPublisher')}
+                </StyledVerifiedText>
+                <StyledVerifiedDivider />
+                <StyledVerifiedCheckLink>
+                  {getLocale('unVerifiedCheck')}
+                </StyledVerifiedCheckLink>
+              </StyledProviderWrapRefreshing>
+              <StyledRefreshOverlay>
+                <StyledRefresh>
+                  <LoaderIcon />
+                </StyledRefresh>
+              </StyledRefreshOverlay>
+            </>
+            :
+            <>
+              <StyledProviderWrapRefreshFinished>
+                <StyledInlineUnVerified>
+                  <UnVerifiedSIcon />
+                </StyledInlineUnVerified>{' '}
+                <StyledVerifiedText>
+                  {getLocale('unVerifiedPublisher')}
+                </StyledVerifiedText>
+                <StyledVerifiedDivider />
+                <StyledVerifiedCheckNoLink>
+                  {getLocale('unVerifiedCheck')}
+                </StyledVerifiedCheckNoLink>
+              </StyledProviderWrapRefreshFinished>
+              <StyledRefreshOverlayFinished>
+                <StyledRefreshLoaderFinished>
+                  <LoaderIcon />
+                </StyledRefreshLoaderFinished>
+              </StyledRefreshOverlayFinished>
+              <StyledRefreshCheckOverlayFinished>
+                <StyledRefreshFinished>
+                  <CheckmarkCircleS />
+                </StyledRefreshFinished>
+              </StyledRefreshCheckOverlayFinished>
+            </>
           ) : null}
         </StyledContent>
       </StyledWrapper>

src/features/rewards/profile/style.ts

@@ -4,6 +4,58 @@
 
 import styled, { css } from '../../../theme'
 import { Props } from './index'
+import { keyframes } from 'styled-components'
+
+const fadeInOut = keyframes`
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+const fadeOutWrap = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.2;
+  }
+`
+
+const fadeInFromNull = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`
+
+const fadeOutToNull = keyframes`
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+`
 
 export const StyledWrapper = styled<{}, 'div'>('div')`
   position: relative;
@@ -73,6 +125,31 @@ export const StyledProviderWrap = styled<{}, 'div'>('div')`
   margin: 4px 0;
 `
 
+export const StyledProviderWrapRefreshing = styled<{}, 'div'>('div')`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  margin: 4px 0;
+  opacity: 0.2;
+  animation-name: ${fadeOutWrap};
+  animation-duration: 500ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+`
+
+export const StyledProviderWrapRefreshFinished = styled<{}, 'div'>('div')`
+  display: flex;
+  align-items: center;
+  font-size: 13px;
+  margin: 4px 0;
+  opacity: 0.2;
+  animation-name: ${fadeIn};
+  animation-duration: 500ms;
+  animation-timing-function: ease-in;
+  animation-fill-mode: forwards;
+  animation-delay: 2750ms;
+`
+
 export const StyledVerifiedText = styled<{}, 'span'>('span')`
   color: ${p => p.theme.palette.grey800};
 `
@@ -88,6 +165,11 @@ export const StyledVerifiedCheckLink = styled<{}, 'span'>('span')`
     color: ${p => p.theme.palette.blurple400};
   }
 `
+export const StyledVerifiedCheckNoLink = styled<{}, 'span'>('span')`
+  color: ${p => p.theme.palette.grey400};
+  text-decoration: none;
+  z-index: 1;
+`
 
 export const StyledVerifiedDivider = styled.span`
   margin: 0 8px;
@@ -107,8 +189,78 @@ export const StyledInlineUnVerified = styled(StyledInlineVerified)`
   color: ${p => p.theme.palette.grey500};
 `
 
+export const StyledRefreshOverlay = styled<{}, 'div'>('div')`
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  color: ${p => p.theme.palette.blurple500};
+  top: 0;
+  left: 0;
+  margin-top: 25px;
+`
+
+export const StyledRefreshOverlayFinished = styled<{}, 'div'>('div')`
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  color: ${p => p.theme.palette.blurple500};
+  top: 0;
+  left: 0;
+  margin-top: 25px;
+  opacity: 1;
+  animation-name: ${fadeOutToNull};
+  animation-duration: 500ms;
+  animation-timing-function: ease-out;
+  animation-fill-mode: forwards;
+`
+
+export const StyledRefreshCheckOverlayFinished = styled<{}, 'div'>('div')`
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  color: ${p => p.theme.palette.blurple500};
+  top: 0;
+  left: 0;
+  margin-top: 25px;
+  opacity: 0;
+  animation-name: ${fadeInOut};
+  animation-delay: 1000ms;
+  animation-duration: 1750ms;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+`
+
 export const StyledRefresh = styled(StyledInlineVerified)`
+  position: absolute;
+  text-align: center;
   display: flex;
+  opacity: 0;
+  animation-name: ${fadeInFromNull};
+  animation-duration: 500ms;
+  animation-timing-function: ease-in;
+  animation-fill-mode: forwards;
+`
+
+export const StyledRefreshLoaderFinished = styled(StyledInlineVerified)`
+  position: absolute;
+  text-align: center;
+  display: flex;
+`
+
+export const StyledRefreshFinished = styled<{}, 'span'>('span')`
+  position: absolute;
+  height: 24px;
+  width: 24px;
+  color: ${p => p.theme.palette.blurple500};
 `
 
 export const StyledSubTitle = styled.span`