docs: add route_transition_and_animation.md #357

DammneD · 2022-01-27T15:50:51Z

No description provided.

also add assets for it

bandantonio · 2022-02-08T07:39:25Z

docs/routing/route_transition_and_animation.md

@@ -0,0 +1,41 @@
+# Route transition & animation


Suggested change

# Route transition & animation

# Route transition and animation

bandantonio · 2022-02-08T07:39:51Z

docs/routing/route_transition_and_animation.md

@@ -0,0 +1,41 @@
+# Route transition & animation
+
+## Overall principle


Suggested change

## Overall principle

## Overview

bandantonio · 2022-02-08T09:21:16Z

docs/routing/route_transition_and_animation.md

+
+## Overall principle
+
+As you may have read in [intoduction](./introduction.md), all transitions in ilc are soft, which means that we can replace, add, remove applications on the page without reloading it, this is possible due to the use of one HTML template for all pages.


Suggested change

As you may have read in [intoduction](./introduction.md), all transitions in ilc are soft, which means that we can replace, add, remove applications on the page without reloading it, this is possible due to the use of one HTML template for all pages.

As you may have read in [intoduction](./introduction.md), all transitions in the ILC are soft. It means that you can add, remove, and replace applications on the page without reloading thanks to the use of one HTML template for all pages. This template comtains so-called [ilc-slots](./route_configuration_options.md#slot-configuration) that are used to render applications. (one application per slot at a time).

bandantonio · 2022-02-08T09:26:58Z

docs/routing/route_transition_and_animation.md

+
+As you may have read in [intoduction](./introduction.md), all transitions in ilc are soft, which means that we can replace, add, remove applications on the page without reloading it, this is possible due to the use of one HTML template for all pages.
+
+At this point, let's take a closer look. Our templates contain so called [ilc-slots](./route_configuration_options.md#slot-configuration) and our applications are rendered inside these slots. Only one application can be displayed in one slot at a time.


Suggested change

At this point, let's take a closer look. Our templates contain so called [ilc-slots](./route_configuration_options.md#slot-configuration) and our applications are rendered inside these slots. Only one application can be displayed in one slot at a time.

bandantonio · 2022-02-08T09:28:32Z

docs/routing/route_transition_and_animation.md

+At this point, let's take a closer look. Our templates contain so called [ilc-slots](./route_configuration_options.md#slot-configuration) and our applications are rendered inside these slots. Only one application can be displayed in one slot at a time.
+
+
+Now let's look at this with examples:


Suggested change

Now let's look at this with examples:

For example:

bandantonio · 2022-02-08T09:56:50Z

docs/routing/route_transition_and_animation.md

+
+![example](../assets/routes/two-app-render-example.png)
+
+Now let's go to the `/hooks/` route, and the app inside the `body` slot will be replaced while the navigation bar will stay in place.


Suggested change

Now let's go to the `/hooks/` route, and the app inside the `body` slot will be replaced while the navigation bar will stay in place.

Navigate to the `/hooks/` route.

The application inside the `body` slot will be replaced, while the navigation bar will stay in place.

bandantonio · 2022-02-08T09:59:56Z

docs/routing/route_transition_and_animation.md

+
+![example](../assets/routes/replaced-app-example.png)
+
+Now let's go to the `/noheader/` route, here we have only one application specified, which is rendered inside the `body` slot, the `navbar` slot is now empty.


Suggested change

Now let's go to the `/noheader/` route, here we have only one application specified, which is rendered inside the `body` slot, the `navbar` slot is now empty.

Navigate to the `/noheader/` route.

For this route, there is only one application specified that is rendered inside the `body` slot. The `navbar` slot is empty now.

bandantonio · 2022-02-08T10:30:22Z

docs/routing/route_transition_and_animation.md

+
+![example](../assets/routes/noheader-example.png)
+
+In addition, I would like to remind you that routing within applications can be processed by native application tools and not processed in any way in ILC, and accordingly the content will always be located inside the same ILC slot.


Suggested change

In addition, I would like to remind you that routing within applications can be processed by native application tools and not processed in any way in ILC, and accordingly the content will always be located inside the same ILC slot.

!!! info ""

Routing within applications can be processed natively by application tools instead of the ILC. With this routing, the content will always be located inside the same ILC slot.

bandantonio · 2022-02-08T10:41:24Z

docs/routing/route_transition_and_animation.md

+No matter how hard we try to optimize the system to minimize the delay and provide users with a well-designed product, there will always be a point where the user has to wait. That is why ILC has a built-in ability to display a spinner when loading an application, despite this, we recommend using more progressive tools like `Skeleton loader` - placeholder for the information that is still loading. It mimic the structure and look of the entire view. But this is just our recommendation, the choice of what to use is up to you, and here you will find descriptions of the standard ILC tools.
+
+Global spinner:
+
+![Global spinner](../assets/routes/spinner.png)
+
+In the settings there are 2 items responsible for this.
+ 1. `globalSpinner.enabled` - allows you to enable or disable the display of the spinner.
+ 2. `globalSpinner.customHTML` - allows you to add your custom spinner.


Suggested change

No matter how hard we try to optimize the system to minimize the delay and provide users with a well-designed product, there will always be a point where the user has to wait. That is why ILC has a built-in ability to display a spinner when loading an application, despite this, we recommend using more progressive tools like `Skeleton loader` - placeholder for the information that is still loading. It mimic the structure and look of the entire view. But this is just our recommendation, the choice of what to use is up to you, and here you will find descriptions of the standard ILC tools.

Global spinner:

![Global spinner](../assets/routes/spinner.png)

In the settings there are 2 items responsible for this.

1. `globalSpinner.enabled` - allows you to enable or disable the display of the spinner.

2. `globalSpinner.customHTML` - allows you to add your custom spinner.

Regardless of system optimization or how well your product design is, there will always be a point where the user has to wait. For these cases, ILC has a built-in feature to display a spinner when loading an application.

### Global spinner

![Global spinner](../assets/routes/spinner.png)

There are the following settings to configure spinner behavior:

1. `globalSpinner.enabled` - enable or disable the display of the spinner.

1. `globalSpinner.customHTML` - add your custom spinner.

!!! info ""

You can also use more progressive tools like `Skeleton loader` - a placeholder for the information that is still loading that mimics the look and structure of the entire view.

bandantonio · 2022-02-08T10:41:45Z

mkdocs.yml

@@ -40,6 +40,7 @@ nav:
    - Routing:
      - Route configuration: docs/routing/route_configuration_options.md
      - Match & cascade merge: docs/routing/route_match_patterns.md
+      - Route transition & animation: docs/routing/route_transition_and_animation.md


Suggested change

- Route transition & animation: docs/routing/route_transition_and_animation.md

- Route transition and animation: docs/routing/route_transition_and_animation.md

bandantonio

One minor update left

bandantonio · 2022-02-08T13:26:41Z

docs/routing/route_transition_and_animation.md

+In this example, the routing table looks as follows:
+![Routing table](../assets/routes/routing-table.png)
+
+In our HTML template - 2 ilc-slots: 


Still unresolved

docs/routing/route_transition_and_animation.md

Co-authored-by: Volodymyr Makukha <nightelfillidan@mail.ru>

DammneD added 2 commits January 27, 2022 17:45

docs: add route_transition_and_animation.md

4a193bc

also add assets for it

docs: fix path

cfa6104

DammneD requested review from StyleT, nightnei and bandantonio January 27, 2022 15:50

StyleT approved these changes Jan 27, 2022

View reviewed changes

bandantonio added the documentation Improvements or additions to documentation label Feb 1, 2022

docs: add path to mkdocs

02d447a

bandantonio requested changes Feb 8, 2022

View reviewed changes

docs: fix description

a56cea1

bandantonio approved these changes Feb 8, 2022

View reviewed changes

docs: minor fix

b86fc8c

bandantonio approved these changes Feb 8, 2022

View reviewed changes

DammneD and others added 2 commits February 15, 2022 11:31

docs: fix path in mkdocs

ab36b83

Merge branch 'master' into docs/routeTransitionsAnimation

3ec99a2

nightnei reviewed Feb 15, 2022

View reviewed changes

docs/routing/route_transition_and_animation.md Outdated Show resolved Hide resolved

bandantonio approved these changes Feb 15, 2022

View reviewed changes

nightnei approved these changes Feb 15, 2022

View reviewed changes

Apply suggestions from code review

718b97f

Co-authored-by: Volodymyr Makukha <nightelfillidan@mail.ru>

DammneD merged commit 03333da into namecheap:master Feb 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

docs: add route_transition_and_animation.md #357

docs: add route_transition_and_animation.md #357

Uh oh!

DammneD commented Jan 27, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

bandantonio left a comment

Uh oh!

bandantonio Feb 8, 2022

Uh oh!

Uh oh!

Uh oh!

	# Route transition & animation
	# Route transition and animation

		@@ -0,0 +1,41 @@
		# Route transition & animation

		## Overall principle


		## Overall principle

		As you may have read in [intoduction](./introduction.md), all transitions in ilc are soft, which means that we can replace, add, remove applications on the page without reloading it, this is possible due to the use of one HTML template for all pages.


		As you may have read in [intoduction](./introduction.md), all transitions in ilc are soft, which means that we can replace, add, remove applications on the page without reloading it, this is possible due to the use of one HTML template for all pages.

		At this point, let's take a closer look. Our templates contain so called [ilc-slots](./route_configuration_options.md#slot-configuration) and our applications are rendered inside these slots. Only one application can be displayed in one slot at a time.

		At this point, let's take a closer look. Our templates contain so called [ilc-slots](./route_configuration_options.md#slot-configuration) and our applications are rendered inside these slots. Only one application can be displayed in one slot at a time.


		Now let's look at this with examples:


		![example](../assets/routes/two-app-render-example.png)

		Now let's go to the `/hooks/` route, and the app inside the `body` slot will be replaced while the navigation bar will stay in place.

	Now let's go to the `/hooks/` route, and the app inside the `body` slot will be replaced while the navigation bar will stay in place.
	Navigate to the `/hooks/` route.
	The application inside the `body` slot will be replaced, while the navigation bar will stay in place.


		![example](../assets/routes/replaced-app-example.png)

		Now let's go to the `/noheader/` route, here we have only one application specified, which is rendered inside the `body` slot, the `navbar` slot is now empty.

	Now let's go to the `/noheader/` route, here we have only one application specified, which is rendered inside the `body` slot, the `navbar` slot is now empty.
	Navigate to the `/noheader/` route.
	For this route, there is only one application specified that is rendered inside the `body` slot. The `navbar` slot is empty now.


		![example](../assets/routes/noheader-example.png)

		In addition, I would like to remind you that routing within applications can be processed by native application tools and not processed in any way in ILC, and accordingly the content will always be located inside the same ILC slot.

	In addition, I would like to remind you that routing within applications can be processed by native application tools and not processed in any way in ILC, and accordingly the content will always be located inside the same ILC slot.
	!!! info ""
	Routing within applications can be processed natively by application tools instead of the ILC. With this routing, the content will always be located inside the same ILC slot.

	- Route transition & animation: docs/routing/route_transition_and_animation.md
	- Route transition and animation: docs/routing/route_transition_and_animation.md

docs: add route_transition_and_animation.md #357

docs: add route_transition_and_animation.md #357

Uh oh!

Conversation

DammneD commented Jan 27, 2022

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bandantonio left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!