diff --git a/src/client/components/ActivityTimeline.tsx b/src/client/components/ActivityTimeline.tsx
index fe4a3cea..5f0b98a2 100644
--- a/src/client/components/ActivityTimeline.tsx
+++ b/src/client/components/ActivityTimeline.tsx
@@ -1,5 +1,5 @@
 import { ComponentProps, useState, Fragment } from "react"
-import { Accordion, Timeline, Icon, Span, Stack, Heading, Card, Box, Tabs } from '@chakra-ui/react';
+import { Accordion, Timeline, Icon, Span, Stack, Heading, Card, Box, Tabs, Skeleton, SkeletonCircle, SkeletonText } from '@chakra-ui/react';
 import { ErrorLike, JsonPlayObject, PlayActivity } from "../../core/Atomic";
 import { PlayData } from "./PlayData";
 import { ErrorAlert } from "./ErrorAlert";
@@ -23,19 +23,48 @@ import { PlayApiCommonDetailed } from "../../core/Api";
 
 
 export interface ActivityDetailProps {
-    activity: PlayApiCommonDetailed
+    activity?: PlayApiCommonDetailed
     collapsibleOpen?: boolean,
     componentType?: 'source' | 'client'
 }
 
+const TimelineLoading = () => {
+    return (
+        <Timeline.Root variant="subtle" size="lg">
+            <Timeline.Item>
+                <Timeline.Connector>
+                    <Timeline.Separator />
+                    <Timeline.Indicator>
+                        <Icon fontSize="lg">
+                            <SkeletonCircle />
+                        </Icon>
+                    </Timeline.Indicator>
+                </Timeline.Connector>
+                <Timeline.Content>
+                    <Timeline.Title>
+                        <SkeletonText noOfLines={1} />
+                    </Timeline.Title>
+                    <SkeletonText noOfLines={2} />
+                </Timeline.Content>
+            </Timeline.Item>
+        </Timeline.Root>
+    );
+}
+
 export const ActivityTimeline = (props: ActivityDetailProps) => {
+
+    if(props.activity === undefined) {
+        return <TimelineLoading/>;
+    }
+
     const {
         activity:{
             play,
             input,
             seenAt
         } = {},
-        collapsibleOpen
+        collapsibleOpen,
+        componentType
     } = props;
     const {
         data: {
@@ -88,7 +117,7 @@ export const ActivityTimeline = (props: ActivityDetailProps) => {
                     <Timeline.Title>
                         <MSCollapsible
                             indicator={<Span>
-                                Discovered <Span color="fg.muted">new (Play) activity from</Span> <Span fontWeight="medium">{capitalize(source)}</Span> <Span color="fg.muted">at {shortTodayAwareFormat(dayjs(seenAt))}</Span>
+                               {componentType === 'source' ? 'Discovered' : 'Recieved'} <Span color="fg.muted">new Play from</Span> <Span fontWeight="medium">{capitalize(source)}</Span> <Span color="fg.muted">at {shortTodayAwareFormat(dayjs(seenAt))}</Span>
                             </Span>}
                             defaultOpen={collapsibleOpen}
                             timeline
diff --git a/src/stories/ActivityTimeline.stories.tsx b/src/stories/ActivityTimeline.stories.tsx
index 891a3e7c..756f6dc6 100644
--- a/src/stories/ActivityTimeline.stories.tsx
+++ b/src/stories/ActivityTimeline.stories.tsx
@@ -10,9 +10,6 @@ import { generatePlayApiCommonDetailed } from "../core/tests/utils/apiFixtures.j
 import { generatePlayWithLifecycle, playWithLifecycleScrobble } from "../core/tests/utils/fixtures.js";
 import { asJsonPlayObject } from '../core/PlayMarshalUtils.js';
 
-type PropsAndCustomArgs = React.ComponentProps<typeof ActivityTimeline> & {
-  componentType: 'source' | 'client'
-};
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = preview.meta({
   title: 'Examples/ActivityTimline',
@@ -25,8 +22,8 @@ const meta = preview.meta({
   tags: ['autodocs'],
   // More on argTypes: https://storybook.js.org/docs/api/argtypes
   args: {
-     activity: generatePlayApiCommonDetailed(),
-     //componentType: 'source'
+     //activity: generatePlayApiCommonDetailed(),
+     componentType: 'source' as const
   },
   argTypes: {
     componentType: {
@@ -43,6 +40,9 @@ decorators: [
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
 });
 
+export const NotLoaded = meta.story({
+});
+
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const ActivityTimelineStory = meta.story({
     loaders: [
@@ -55,7 +55,6 @@ export const ActivityTimelineStory = meta.story({
         }
       }
       )));
-
       return {
         activity: generatePlayApiCommonDetailed({
         playOpts: [{play: scrobbleError}],