Add loading indicator when sharing image of result

MOVACT · Aug 8, 2021 · 3d85baf · 3d85baf
1 parent 394f424
commit 3d85baf
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 1 deletion.
diff --git a/src/screens/SwiperResult/index.tsx b/src/screens/SwiperResult/index.tsx
@@ -15,6 +15,7 @@ import Download from 'icons/Download';
 import Polaroid from 'icons/Polaroid';
 import React from 'react';
 import {
+  ActivityIndicator,
   BackHandler,
   Dimensions,
   Image,
@@ -56,6 +57,7 @@ const SwiperResult: React.FC = () => {
   const relevantQuestionsCount = React.useRef(0);
 
   const [loading, setLoading] = React.useState(true);
+  const [loadingScreenshot, setLoadingScreenshot] = React.useState(false);
   const [exitConfirmation, showExitConfirmation] = React.useState(false);
 
   React.useEffect(() => {
@@ -264,6 +266,7 @@ const SwiperResult: React.FC = () => {
   ordered.sort((a, b) => (a.score - b.score > 0 ? -1 : 1));
 
   const shareResult = React.useCallback(() => {
+    setLoadingScreenshot(true);
     const queryString =
       ordered
         .map((party) => {
@@ -304,6 +307,8 @@ const SwiperResult: React.FC = () => {
         reader.onloadend = () => {
           var base64data = reader.result;
 
+          setLoadingScreenshot(false);
+
           Share.open({
             title: t('swiperResult.shareTitle'),
             message: t('swiperResult.shareMessage', [election!.name]),
@@ -360,6 +365,24 @@ const SwiperResult: React.FC = () => {
             snapToInterval={(width - 25 * 2) / 2 - 10}>
             {actions.map((action) => {
               const Icon = action.icon;
+              if (
+                action.label === 'swiperResult.share' &&
+                loadingScreenshot === true
+              ) {
+                return (
+                  <View style={styles.actionItem} key={action.label}>
+                    <View style={styles.actionButton}>
+                      <ActivityIndicator
+                        color="#fff"
+                        style={styles.actionIcon}
+                      />
+                      <Txt medium style={styles.actionText}>
+                        {t('swiperResult.share.loading')}
+                      </Txt>
+                    </View>
+                  </View>
+                );
+              }
               return (
                 <View style={styles.actionItem} key={action.label}>
                   <TouchableOpacity

diff --git a/src/translations/ar.ts b/src/translations/ar.ts
@@ -108,6 +108,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/ar/page/imprint',
   'infosIndex.privacyButton': 'خصوصية البيانات',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/ar/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/de.ts b/src/translations/de.ts
@@ -53,7 +53,7 @@ const lang = {
 
   'swiperResult.yourResult': 'Dein Ergebnis',
   'swiperResult.chooseParties': 'Parteien auswählen',
-  'swiperResult.share': 'Teilen',
+  'swiperResult.share': 'Als Bild teilen',
   'swiperResult.parties': 'Parteien',
   'swiperResult.filterParties': 'Parteien filtern',
 
@@ -110,6 +110,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/de/page/impressum',
   'infosIndex.privacyButton': 'Datenschutz',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/de/page/datenschutz',
+
+  'swiperResult.share.loading': 'Lädt...',
 };
 
 export default lang;
diff --git a/src/translations/en.ts b/src/translations/en.ts
@@ -107,6 +107,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/en/page/imprint',
   'infosIndex.privacyButton': 'Privacy',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/en/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/fa.ts b/src/translations/fa.ts
@@ -107,6 +107,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/fa/page/imprint',
   'infosIndex.privacyButton': 'حریم خصوصی',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/fa/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/fi.ts b/src/translations/fi.ts
@@ -108,6 +108,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/fi/page/imprint',
   'infosIndex.privacyButton': 'Tietosuojaseloste',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/fi/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/fr.ts b/src/translations/fr.ts
@@ -108,6 +108,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/fr/page/imprint',
   'infosIndex.privacyButton': 'Politique de protection des données ',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/fr/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/ru.ts b/src/translations/ru.ts
@@ -109,6 +109,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/ru/page/imprint',
   'infosIndex.privacyButton': 'Политика конфиденциальности',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/ru/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/sv.ts b/src/translations/sv.ts
@@ -106,6 +106,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/sv/page/imprint',
   'infosIndex.privacyButton': 'Dataskyddsbeskrivning',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/sv/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;
diff --git a/src/translations/tr.ts b/src/translations/tr.ts
@@ -108,6 +108,8 @@ const lang = {
   'infosIndex.imprintLink': 'https://www.voteswiper.org/tr/page/imprint',
   'infosIndex.privacyButton': 'Veri koruma',
   'infosIndex.privacyLink': 'https://www.voteswiper.org/tr/page/privacy',
+
+  'swiperResult.share.loading': 'Loading...',
 };
 
 export default lang;