fix: Fixes Campaign Loading State (#49)

* fix: Fixes Campaign Loading State

* Updated snapshots

* Added isLoading to the campaign card for safety

Co-authored-by: Richard Dubay <richardtdubayjr@gmail.com>

src/tabs/discover/SearchFeed/__snapshots__/SearchFeed.tests.js.snap

@@ -469,7 +469,6 @@ Celebrate your freedom in Christ — in the car, shower, cubicle or wherever you
                                 "borderRadius": 16,
                                 "borderWidth": 0,
                                 "height": 32,
-                                "marginBottom": 16,
                                 "paddingHorizontal": 12,
                                 "width": 64,
                               }
@@ -1427,7 +1426,6 @@ Celebrate your freedom in Christ — in the car, shower, cubicle or wherever you
                                 "borderRadius": 16,
                                 "borderWidth": 0,
                                 "height": 32,
-                                "marginBottom": 16,
                                 "paddingHorizontal": 12,
                                 "width": 64,
                               }

src/ui/BrandedCard.js

@@ -4,41 +4,14 @@ import { get } from 'lodash';
 
 import { FeaturedCard, CardLabel, styled } from '@apollosproject/ui-kit';
 
-// If we decide to go back to what we had before:
-// * Uncomment the LiveAwareLabel code below
-// * Remove hasAction, campaign, and summary from props and propTypes
-// * Remove the StyledCardLabel & getTheme functions
-// * Change LabelComponent to be:
-// LabelComponent={
-//    labelText ? (
-//      <LiveAwareLabel
-//        type={get(theme, 'type') === 'LIGHT' ? 'darkOverlay' : undefined}
-//        customTheme={theme}
-//        isLive={isLive}
-//        title={labelText}
-//      />
-//    ) : null
-
-// const LiveAwareLabel = withTheme(	const StyledCardLabel = styled(({ theme }) => ({
-//   ({ customTheme, isLive, title, type, theme }) => ({	  marginBottom: theme.sizing.baseUnit,
-//     ...(isLive	}))(CardLabel);
-//       ? {
-//           title: 'Live',
-//           type: 'secondary',
-//           icon: 'live-dot',
-//           iconSize: theme.helpers.rem(0.4375), // using our typographic size unit based on fontSize so that the icon scales correctly with font size changes.
-//         }
-//       : {
-//           title,
-//           type: !customTheme ? 'secondary' : type,
-//         }),
-//     style: { marginBottom: theme.sizing.baseUnit },
-//   })
-// )(CardLabel);
-
-const StyledCardLabel = styled(({ theme }) => ({
-  marginBottom: theme.sizing.baseUnit,
-}))(CardLabel);
+const StyledCardLabel = styled(
+  ({ isLoading, theme }) =>
+    isLoading
+      ? {}
+      : {
+          marginBottom: theme.sizing.baseUnit,
+        }
+)(CardLabel);
 
 const getTheme = (theme) =>
   get(theme, 'type') === 'LIGHT' ? 'darkOverlay' : undefined;
@@ -55,10 +28,14 @@ const BrandedCard = ({
   <FeaturedCard
     LabelComponent={
       campaign && isLive ? (
-        <StyledCardLabel title={"Today's Sermon"} />
+        <StyledCardLabel
+          isLoading={otherProps.isLoading}
+          title={"Today's Sermon"}
+        />
       ) : (
         labelText && (
           <StyledCardLabel
+            isLoading={otherProps.isLoading}
             title={labelText}
             type={theme ? getTheme(theme) : 'secondary'}
           />