13 |
14 |
15 |
16 | Ionic 4
17 | Improving UX with App Shell Components
18 |
19 |
20 |
21 | Let me explain you the importance of adopting the App Shell pattern in your Ionic apps and show you how to implement it using Ionic 4, Angular 7 and some advanced CSS techniques.
22 |
23 |
24 |
25 |
26 |
27 | Route Resolves
28 |
29 |
30 |
31 | Angular Route Resolves are a special kind of route guards. They enable us to pre-fetch data from the server before navigating to a route.
32 |
33 |
34 |
35 | Blocking Resolver
36 |
37 | By design, Angular Route Resolvers won't transition to the page until the resolved Observable completes.
38 |
39 |
40 | Use case: Let's suppose the backend is slow and takes 5 seconds to fetch data and return it to the client. The expected behavior for that scenario is that the page transition will be blocked for 5 seconds until the server sends data back to the client.
41 |
42 |
43 | A minimal improvement would be to show a loader while the resolved Observable completes.
44 |
45 |
46 | Blocking Resolver
47 |
48 |
49 |
50 | Non Blocking Resolver
51 |
52 | You can avoid waiting for the Observable to complete and have instant page transitions.
53 |
54 |
55 | The trade-off of this approach is that the waiting time gets passed to the page component you are navigating to.
56 |
57 |
58 | Non Blocking Resolver
59 |
60 |
61 | This also means that you will be responsible for unhandled errors that may cause navigating to unavailable pages.
62 |
63 |
64 |
65 | Progressive Shell Resolver
66 |
67 | By showing an app shell layout while loading data, we fix the waiting time issue caused when using non-blocking resolvers.
68 |
69 |
70 | Shell Resolver
71 |
72 |
73 |
74 |
75 | App Shell Approaches
76 |
77 |
78 | Shell Overlays
79 |
80 | This is a straightforward approach. We define both shell and view layouts and switch/animate the transition between them when page/business/view data is available.
81 |
82 |
83 | <ng-container *ngIf="!routeResolveData">
84 | <!-- Shell layout here -->
85 | </ng-container>
86 |
87 | <ng-container *ngIf="routeResolveData">
88 | <!-- View layout here -->
89 | </ng-container>
90 |
91 |
92 |
93 | Inline Shells
94 |
95 | This type of shells use the same layout (DOM elements) to present the loading state using the shell model and the real data once it’s available.
96 |
97 |
98 | <ion-row>
99 | <ion-col size="4">
100 | <app-image-shell class="add-spinner" [src]="routeResolveData?.image" [alt]="'Sample Image'"></app-image-shell>
101 | </ion-col>
102 | <ion-col size="8">
103 | <h3>
104 | <app-text-shell [data]="routeResolveData?.title"></app-text-shell>
105 | </h3>
106 | <p>
107 | <app-text-shell lines="3" [data]="routeResolveData?.description"></app-text-shell>
108 | </p>
109 | </ion-col>
110 | </ion-row>
111 |
112 |
113 |
114 |
115 | App Shell Components
116 |
117 |
118 | Image Shell
119 |
120 | This component basically shows a loading indicator while fetching an image source.
121 |
122 |
123 | By listening to the (load) event attached to the <img/> element, once the image has loaded, we hide the loader.
124 |
125 |
126 | Note: As the [src] property is empty, the (load) event won't get triggered and then the component will remain in it's loading state.
127 |
128 |
129 | <app-image-shell [src]="" [alt]=""></app-image-shell>
130 |
131 |
132 |
137 |
138 |
139 | Text Shell
140 |
141 | This component basically works by wrapping the text node with a loading indicator while you are fetching data.
142 |
143 |
144 | While there are empty values the component adds some loading styles and animations. Whereas while there are non empty values, the loading state is removed.
145 |
146 |
147 | <app-text-shell [data]="" lines="3"></app-text-shell>
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 | CSS Animations
156 |
157 |
158 | No Animation
159 |
160 | Just the masked lines without any animation.
161 |
162 |
165 |
166 | Note: This approach plays well with use cases that require transparent backgrounds because it doesn't include an animation beneath.
167 |
168 |
169 | Just set the masks to transparent and voila.
170 |
171 |
174 |
175 |
176 | Background Gradient
177 |
178 | This animation works by setting a background gradient beneath some mask elements.
179 |
180 |
183 |
184 | Side effect: This solution doesn’t play well if you require the text-shell to have a transparent background as the masks need a solid color to work properly.
185 |
186 |
189 |
190 |
191 | Bouncing Lines Background
192 |
193 | This animation works by animating the background-size property to achieve a bouncing effect.
194 |
195 |
198 |
199 | Note: As we don’t use masks, this approach works well with use cases that require transparent backgrounds.
200 |
201 |
204 |
205 |
206 |
--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
1 | .welcome-card ion-img {
2 | max-height: 35vh;
3 | overflow: hidden;
4 | }
5 |
6 | pre {
7 | font-size: 14px;
8 | background: #CCC;
9 | padding: 10px;
10 | }
11 |
12 | // Two lines text shell
13 | .text-shell {
14 | position: relative;
15 | min-height: 35px; /* (16px * 2) + 3px */
16 |
17 | // No animation, default masked lines
18 | &::after {
19 | content: "";
20 | position: absolute;
21 | top: 0;
22 | left: 0;
23 | bottom: 0;
24 | right: 0;
25 | background-repeat: no-repeat;
26 | background-image:
27 | /* First line: 95% width grey, 5% white mask */
28 | linear-gradient(to right, #EEE 95%, transparent 95%),
29 | /* Separation between lines (a full width white line mask) */
30 | linear-gradient(to right, transparent 100%, transparent 100%),
31 | /* Second line: 65% width grey, 35% white mask */
32 | linear-gradient(to right, #EEE 65%, transparent 65%);
33 |
34 | background-size:
35 | /* First line: 100% width, 16px height */
36 | 100% 16px,
37 | /* Separation between lines: a full width, 3px height line */
38 | 100% 3px,
39 | /* Second line: 100% width, 16px height */
40 | 100% 16px;
41 |
42 | background-position:
43 | /* First line: begins at left: 0, top: 0 */
44 | 0 0px,
45 | /* Separation between lines: begins at left: 0, top: 16px (right below the first line) */
46 | 0 16px,
47 | /* Second line: begins at left: 0, top: (16px + 3px) (right below the separation between lines) */
48 | 0 19px;
49 | }
50 |
51 | &.gradient-animation {
52 | &::after {
53 | content: "";
54 | position: absolute;
55 | top: 0;
56 | left: 0;
57 | bottom: 0;
58 | right: 0;
59 | background-repeat: no-repeat;
60 | background-image:
61 | /* First line: 95% width grey, 5% white mask */
62 | linear-gradient(to right, transparent 95%, #FFF 95%),
63 | /* Separation between lines (a full width white line mask) */
64 | linear-gradient(to right, #FFF 100%, #FFF 100%),
65 | /* Second line: 65% width grey, 35% white mask */
66 | linear-gradient(to right, transparent 65%, #FFF 65%);
67 |
68 | background-size:
69 | /* First line: 100% width, 16px height */
70 | 100% 16px,
71 | /* Separation between lines: a full width, 3px height line */
72 | 100% 3px,
73 | /* Second line: 100% width, 16px height */
74 | 100% 16px;
75 |
76 | background-position:
77 | /* First line: begins at left: 0, top: 0 */
78 | 0 0px,
79 | /* Separation between lines: begins at left: 0, top: 16px (right below the first line) */
80 | 0 16px,
81 | /* Second line: begins at left: 0, top: (16px + 3px) (right below the separation between lines) */
82 | 0 19px;
83 | }
84 |
85 | // The animation that goes beneath the masks
86 | &::before {
87 | content: "";
88 | position: absolute;
89 | top: 0;
90 | left: 0;
91 | bottom: 0;
92 | right: 0;
93 | background:
94 | linear-gradient(to right, #EEE 8%, #DDD 18%, #EEE 33%);
95 | background-size: 800px 104px;
96 | animation: animateBackground 2s ease-in-out infinite;
97 | }
98 | }
99 |
100 | &.bouncing-animation {
101 | &::after {
102 | content: "";
103 | position: absolute;
104 | top: 0;
105 | left: 0;
106 | bottom: 0;
107 | right: 0;
108 | background-repeat: no-repeat;
109 | background-image:
110 | /* First line: 95% width grey */
111 | linear-gradient(to right, #EEE 95%, transparent 95%),
112 | /* Separation between lines (a full width transparent line mask) */
113 | linear-gradient(to right, transparent 100%, transparent 100%),
114 | /* Second line: 65% width grey */
115 | linear-gradient(to right, #EEE 65%, transparent 65%);
116 |
117 | background-size:
118 | /* First line: 100% width, 16px height */
119 | 100% 16px,
120 | /* Separation between lines: a full width, 3px height line */
121 | 100% 3px,
122 | /* Second line: 100% width, 16px height */
123 | 100% 16px;
124 |
125 | background-position:
126 | /* First line: begins at left: 0, top: 0 */
127 | 0 0px,
128 | /* Separation between lines: begins at left: 0, top: 16px (right below the first line) */
129 | 0 16px,
130 | /* Second line: begins at left: 0, top: (16px + 3px) (right below the separation between lines) */
131 | 0 19px;
132 |
133 | animation-direction: alternate-reverse;
134 | animation-name: animateMultiLine;
135 | animation-fill-mode: forwards;
136 | animation-iteration-count: infinite;
137 | animation-timing-function: ease-in-out;
138 | animation-duration: 1s;
139 |
140 | @keyframes animateMultiLine {
141 | 0%{
142 | background-size:
143 | /* First line animation initial state: 80% width, 16px height */
144 | 80% 16px,
145 | /* Separation between lines: a full width, 3px height line */
146 | 100% 3px,
147 | /* Second line animation initial state: 60% width, 16px height */
148 | 60% 16px;
149 | }
150 |
151 | 100%{
152 | background-size:
153 | /* First line animation final state: 100% width, 16px height */
154 | 100% 16px,
155 | /* Separation between lines: a full width, 3px height line */
156 | 100% 3px,
157 | /* Second line animation final state: 100% width, 16px height */
158 | 100% 16px;
159 | }
160 | }
161 | }
162 | }
163 |
164 | @keyframes animateBackground {
165 | 0%{
166 | background-position: -468px 0
167 | }
168 |
169 | 100%{
170 | background-position: 468px 0
171 | }
172 | }
173 | }
174 |
--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
1 | import { Component } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: 'home.page.html',
6 | styleUrls: ['home.page.scss'],
7 | })
8 | export class HomePage {
9 |
10 | }
11 |
--------------------------------------------------------------------------------
/src/app/non-blocking-resolver/non-blocking-resolver.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 | import { FormsModule } from '@angular/forms';
4 | import { Routes, RouterModule } from '@angular/router';
5 | import { HttpClientModule } from '@angular/common/http';
6 |
7 | import { IonicModule } from '@ionic/angular';
8 |
9 | import { NonBlockingResolverPage } from './non-blocking-resolver.page';
10 | import { NonBlockingResolver } from './non-blocking.resolver';
11 |
12 | const routes: Routes = [
13 | {
14 | path: '',
15 | component: NonBlockingResolverPage,
16 | resolve: {
17 | data: NonBlockingResolver
18 | }
19 | }
20 | ];
21 |
22 | @NgModule({
23 | imports: [
24 | CommonModule,
25 | FormsModule,
26 | IonicModule,
27 | HttpClientModule,
28 | RouterModule.forChild(routes)
29 | ],
30 | declarations: [NonBlockingResolverPage],
31 | providers: [NonBlockingResolver]
32 | })
33 | export class NonBlockingResolverPageModule {}
34 |
--------------------------------------------------------------------------------
/src/app/non-blocking-resolver/non-blocking-resolver.page.html:
--------------------------------------------------------------------------------
1 | 
35 | 
36 | 
37 |