diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index 0b7af4c..7042fee 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="clientInfo$ | async as clientInfo">
+<ng-container>
     <div class="grid">
         <div class="col-12 lg:col-6 xl:col-3">
 
@@ -8,7 +8,14 @@
                         <span class="block text-500 font-medium mb-3">Your Best Difficulty <i
                                 class="pi pi-question-circle ml-2"
                                 pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i></span>
-                        <div class="text-900 font-medium text-xl">{{clientInfo.bestDifficulty | numberSuffix}}
+                        <div class="text-900 font-medium text-xl">
+
+                            <ng-container
+                                *ngIf="clientInfo$ | async as clientInfo; else loading">{{clientInfo.bestDifficulty |
+                                numberSuffix}}</ng-container>
+                            <ng-template #loading>
+                                <p-skeleton></p-skeleton>
+                            </ng-template>
                         </div>
                     </div>
                     <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
@@ -16,27 +23,44 @@
                         <i class="pi pi-star text-orange-500 text-xl"></i>
                     </div>
                 </div>
-                <span class="text-green-500 font-medium">{{clientInfo.bestDifficulty | number}}</span>
+                <span class="text-green-500 font-medium">
+
+                    <ng-container *ngIf="clientInfo$ | async as clientInfo; else loading">{{clientInfo.bestDifficulty |
+                        number}}</ng-container>
+                    <ng-template #loading>
+                        <p-skeleton></p-skeleton>
+                    </ng-template>
+                </span>
             </div>
 
 
         </div>
 
-        <ng-container *ngIf="networkInfo$ | async as networkInfo">
+        <ng-container>
             <div class="col-12 lg:col-6 xl:col-3">
                 <div class="card mb-4">
                     <div class="flex justify-content-between mb-3">
                         <div>
                             <span class="block text-500 font-medium mb-3">Network Difficulty</span>
-                            <div class="text-900 font-medium text-xl">{{networkInfo.difficulty | numberSuffix}}
+                            <div class="text-900 font-medium text-xl">
+                                <ng-container
+                                    *ngIf="networkInfo$ | async as networkInfo; else loading">{{networkInfo.difficulty |
+                                    numberSuffix}}</ng-container>
+                                <ng-template #loading><p-skeleton></p-skeleton></ng-template>
                             </div>
+
                         </div>
                         <!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
                         [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
                         <i class="pi pi-star text-orange-500 text-xl"></i>
                     </div> -->
                     </div>
-                    <span class="text-green-500 font-medium">{{networkInfo.difficulty | number}}</span>
+                    <span class="text-green-500 font-medium">
+                        <ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
+                            {{networkInfo.difficulty
+                            | number}}</ng-container>
+                        <ng-template #loading><p-skeleton></p-skeleton></ng-template>
+                    </span>
                 </div>
             </div>
             <div class="col-12 lg:col-6 xl:col-3">
@@ -44,7 +68,10 @@
                     <div class="flex justify-content-between mb-3">
                         <div>
                             <span class="block text-500 font-medium mb-3">Network Hash Rate </span>
-                            <div class="text-900 font-medium text-xl">{{networkInfo.networkhashps | hashSuffix}}
+                            <div class="text-900 font-medium text-xl">
+                                <ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
+                                    {{networkInfo.networkhashps | hashSuffix}}</ng-container>
+                                <ng-template #loading><p-skeleton></p-skeleton></ng-template>
                             </div>
                         </div>
                         <!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
@@ -60,7 +87,10 @@
                     <div class="flex justify-content-between mb-3">
                         <div>
                             <span class="block text-500 font-medium mb-3">Block Height</span>
-                            <div class="text-900 font-medium text-xl">{{networkInfo.blocks}}
+                            <div class="text-900 font-medium text-xl">
+                                <ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
+                                    {{networkInfo.blocks}}</ng-container>
+                                <ng-template #loading><p-skeleton></p-skeleton></ng-template>
                             </div>
                         </div>
                         <!-- <div class="flex align-items-center justify-content-center bg-orange-100 border-round"
@@ -68,69 +98,133 @@
                         <i class="pi pi-star text-orange-500 text-xl"></i>
                     </div> -->
                     </div>
-                    <span class="text-green-500 font-medium">Weight: {{networkInfo.currentblockweight | number}}</span>
+                    <span class="text-green-500 font-medium">Weight:
+                        <ng-container *ngIf="networkInfo$ | async as networkInfo; else loading">
+                            {{networkInfo.currentblockweight | number}}</ng-container>
+                        <ng-template #loading><p-skeleton></p-skeleton></ng-template>
+                    </span>
                 </div>
             </div>
         </ng-container>
     </div>
     <div class="card">
-        <p-table #dataTable [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader"
-            [value]="clientInfo.workers" [expandedRowKeys]="expandedRows$ | async"
-            [tableStyle]="{ 'min-width': '50rem' }">
+        <ng-container *ngIf="clientInfo$ | async as clientInfo; else loadingTable">
+            <p-table #dataTable [rowHover]="true" groupRowsBy="name" dataKey="name" rowGroupMode="subheader"
+                [value]="clientInfo.workers" [expandedRowKeys]="expandedRows$ | async"
+                [tableStyle]="{ 'min-width': '50rem' }">
 
 
-            <ng-template pTemplate="header">
-                <tr>
-                    <th>Name</th>
-                    <th>Session ID</th>
-                    <th>Hash Rate</th>
-                    <th>Session Best Difficulty</th>
-                    <th>Uptime</th>
-                    <th>Last Seen</th>
-                </tr>
-            </ng-template>
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>Name</th>
+                        <th>Session ID</th>
+                        <th>Hash Rate</th>
+                        <th>Session Best Difficulty</th>
+                        <th>Uptime</th>
+                        <th>Last Seen</th>
+                    </tr>
+                </ng-template>
 
 
-            <ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
-                <tr [routerLink]="[worker.name]">
-                    <td>
-                        <button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
-                            [pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2"
-                            [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
+                <ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
+                    <tr [routerLink]="[worker.name]">
+                        <td>
+                            <button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
+                                [pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2"
+                                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
 
-                        <span class="worker-name font-bold ml-2">{{worker.name}} </span>
+                            <span class="worker-name font-bold ml-2">{{worker.name}} </span>
 
-                    </td>
-                    <td>
-                        {{getSessionCount(worker.name, clientInfo.workers)}} Sessions
-                    </td>
-                    <td>
-                        {{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
-                    </td>
-                    <td>
-                        {{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
-                    </td>
-                    <td>
+                        </td>
+                        <td>
+                            {{getSessionCount(worker.name, clientInfo.workers)}} Sessions
+                        </td>
+                        <td>
+                            {{getTotalHashRate(worker.name, clientInfo.workers) | hashSuffix}}
+                        </td>
+                        <td>
+                            {{getBestDifficulty(worker.name, clientInfo.workers) | numberSuffix}}
+                        </td>
+                        <td>
 
-                    </td>
-                    <td></td>
-                </tr>
-            </ng-template>
+                        </td>
+                        <td></td>
+                    </tr>
+                </ng-template>
 
 
-            <ng-template pTemplate="rowexpansion" let-worker>
-                <tr [routerLink]="[worker.name, worker.sessionId]">
-                    <td></td>
-                    <td>{{worker.sessionId}}</td>
-                    <td>{{worker.hashRate | hashSuffix}}</td>
-                    <td>{{worker.bestDifficulty | numberSuffix}}</td>
-                    <td>{{worker.startTime | dateAgo}}</td>
-                    <td>{{worker.lastSeen | dateAgo}}</td>
-                </tr>
-            </ng-template>
+                <ng-template pTemplate="rowexpansion" let-worker>
+                    <tr [routerLink]="[worker.name, worker.sessionId]">
+                        <td></td>
+                        <td>{{worker.sessionId}}</td>
+                        <td>{{worker.hashRate | hashSuffix}}</td>
+                        <td>{{worker.bestDifficulty | numberSuffix}}</td>
+                        <td>{{worker.startTime | dateAgo}}</td>
+                        <td>{{worker.lastSeen | dateAgo}}</td>
+                    </tr>
+                </ng-template>
 
 
-        </p-table>
+            </p-table>
+        </ng-container>
+        <ng-template #loadingTable>
+            <p-table #dataTable [rowHover]="true" groupRowsBy="loading" dataKey="loading" rowGroupMode="subheader"
+                [value]="[{loading: 'loading'}]" [expandedRowKeys]="{loading: true}"
+                [tableStyle]="{ 'min-width': '50rem' }">
+
+
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>Name</th>
+                        <th>Session ID</th>
+                        <th>Hash Rate</th>
+                        <th>Session Best Difficulty</th>
+                        <th>Uptime</th>
+                        <th>Last Seen</th>
+                    </tr>
+                </ng-template>
+
+
+                <ng-template pTemplate="groupheader" let-worker let-rowIndex="rowIndex" let-expanded="expanded">
+                    <tr>
+                        <td>
+                            <button (click)="$event.stopImmediatePropagation()" type="button" pButton pRipple
+                                [pRowToggler]="worker" class="p-button-text p-button-rounded p-button-plain mr-2"
+                                [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
+
+                            <span class="worker-name font-bold ml-2">{{worker.name}} </span>
+
+                        </td>
+                        <td>
+                            <p-skeleton></p-skeleton>
+                        </td>
+                        <td>
+                            <p-skeleton></p-skeleton>
+                        <td>
+                            <p-skeleton></p-skeleton>
+                        </td>
+                        <td>
+
+                        </td>
+                        <td></td>
+                    </tr>
+                </ng-template>
+
+
+                <ng-template pTemplate="rowexpansion" let-worker>
+                    <tr>
+                        <td></td>
+                        <td><p-skeleton></p-skeleton></td>
+                        <td><p-skeleton></p-skeleton></td>
+                        <td><p-skeleton></p-skeleton></td>
+                        <td><p-skeleton></p-skeleton></td>
+                        <td><p-skeleton></p-skeleton></td>
+                    </tr>
+                </ng-template>
+
+
+            </p-table>
+        </ng-template>
 
 
 
@@ -139,11 +233,14 @@
 
     </div>
 
-    <div *ngIf="chartData$ | async as chartData">
-        <div class="card">
+
+    <div class="card">
+        <ng-container *ngIf="chartData$ | async as chartData; else loadingChart">
             <p-chart [data]="chartData" [options]="chartOptions"></p-chart>
-        </div>
+        </ng-container>
+        <ng-template #loadingChart>
+            <p-skeleton width="100%" height="40vh"></p-skeleton>
+        </ng-template>
+
     </div>
-
-
 </ng-container>
\ No newline at end of file
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index 479612a..d1331a4 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -37,7 +37,9 @@ export class DashboardComponent implements AfterViewInit {
 
 
 
-    this.networkInfo$ = this.appService.getNetworkInfo();
+    this.networkInfo$ = this.appService.getNetworkInfo().pipe(
+      shareReplay({ refCount: true, bufferSize: 1 })
+    );
 
     this.address = this.route.snapshot.params['address'];
     this.clientInfo$ = this.clientService.getClientInfo(this.address).pipe(
diff --git a/src/app/components/splash/splash.component.html b/src/app/components/splash/splash.component.html
index d11866f..ca6c5ea 100644
--- a/src/app/components/splash/splash.component.html
+++ b/src/app/components/splash/splash.component.html
@@ -58,43 +58,73 @@
         <div class="col-12">
 
 
-            <div *ngIf="chartData$ | async as chartData">
+            <div>
                 <div class="card chart">
 
                     <div class="text-center mb-2">Uptime: {{uptime$ | async | dateAgo}}</div>
 
+                    <ng-container *ngIf="chartData$ | async as chartData; else loadingChart">
+                        <p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
 
-                    <p-chart [responsive]="true" type="line" [data]="chartData" [options]="chartOptions"></p-chart>
+                    </ng-container>
+                    <ng-template #loadingChart>
+                        <p-skeleton width="100%" height="40vh"></p-skeleton>
+                    </ng-template>
                 </div>
             </div>
 
         </div>
 
 
-        <div class="col-12" *ngIf="userAgents$ | async as userAgents">
+        <div class="col-12">
             <div class="card">
                 <h4 style="text-align: center;">Online Devices</h4>
-                <p-table [value]="userAgents">
-                    <ng-template pTemplate="header">
-                        <tr>
-                            <th>Device</th>
-                            <th>Currently Working</th>
-                            <th>Total Hash Rate</th>
-                            <th>Best Difficulty <i class="pi pi-question-circle ml-2"
-                                    pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
-                            </th>
-                        </tr>
-                    </ng-template>
-                    <ng-template pTemplate="body" let-userAgent>
-                        <tr>
-                            <td>{{ userAgent.userAgent | userAgent }}</td>
-                            <td>{{ userAgent.count }}</td>
-                            <td>{{ userAgent.totalHashRate | hashSuffix }}</td>
-                            <td>{{ userAgent.bestDifficulty | numberSuffix}}</td>
-                        </tr>
-                    </ng-template>
-                </p-table>
-
+                <ng-container *ngIf="userAgents$ | async as userAgents">
+                    <p-table [value]="userAgents">
+                        <ng-template pTemplate="header">
+                            <tr>
+                                <th>Device</th>
+                                <th>Currently Working</th>
+                                <th>Total Hash Rate</th>
+                                <th>Best Difficulty <i class="pi pi-question-circle ml-2"
+                                        pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
+                                </th>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-userAgent>
+                            <tr></tr>
+                            <tr>
+                                <td>{{ userAgent.userAgent | userAgent }}</td>
+                                <td>{{ userAgent.count }}</td>
+                                <td>{{ userAgent.totalHashRate | hashSuffix }}</td>
+                                <td>{{ userAgent.bestDifficulty | numberSuffix}}</td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </ng-container>
+                <ng-template #loadingTable>
+                    <p-table [value]="[{},{},{}]">
+                        <ng-template pTemplate="header">
+                            <tr>
+                                <th>Device</th>
+                                <th>Currently Working</th>
+                                <th>Total Hash Rate</th>
+                                <th>Best Difficulty <i class="pi pi-question-circle ml-2"
+                                        pTooltip="If you find a solution with a difficulty higher than the network difficulty, you've found a block."></i>
+                                </th>
+                            </tr>
+                        </ng-template>
+                        <ng-template pTemplate="body" let-row>
+                            <tr></tr>
+                            <tr>
+                                <td><p-skeleton></p-skeleton></td>
+                                <td><p-skeleton></p-skeleton></td>
+                                <td><p-skeleton></p-skeleton></td>
+                                <td><p-skeleton></p-skeleton></td>
+                            </tr>
+                        </ng-template>
+                    </p-table>
+                </ng-template>
             </div>
         </div>
 
diff --git a/src/prime-ng.module.ts b/src/prime-ng.module.ts
index 35d3d0a..979f1cd 100644
--- a/src/prime-ng.module.ts
+++ b/src/prime-ng.module.ts
@@ -3,6 +3,7 @@ import { ConfirmationService, MessageService } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { ChartModule } from 'primeng/chart';
 import { InputSwitchModule } from 'primeng/inputswitch';
+import { SkeletonModule } from 'primeng/skeleton';
 import { TableModule } from 'primeng/table';
 import { TooltipModule } from 'primeng/tooltip';
 
@@ -16,7 +17,8 @@ const primeNgModules = [
     ChartModule,
     InputSwitchModule,
     ButtonModule,
-    TooltipModule
+    TooltipModule,
+    SkeletonModule
     // DropdownModule,
     // ToastModule,
     // CheckboxModule,