Building animation for content that is processing

[tomsmith8]

Task

We need a building/ construction style animation for when content is in progress / processing.

• Node on the graph

• New 'My Content' Table

[Antanasijevic]

@tomsmith8 Small scale Preloader animation can be tricky, especially if we need to show it multiple times in a column. There are few interesting ones that may work. I can try them out in the layout and see how each of these work. Please, check out the samples.

https://lottiefiles.com/animations/spiral-dots-preloader-fc3L0iIB92?from=search

https://lottiefiles.com/animations/loading-XXcY9OU0ad?from=search

https://lottiefiles.com/animations/isometric-cube-loader-outline-eLWffRP9eJ?from=search

[Antanasijevic]

@tomsmith8 Here is one preview in prototype

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=6105-1286&t=P64NDqVve77Gjvv2-1&scaling=min-zoom&page-id=5900%3A37898&starting-point-node-id=5900%3A37899&show-proto-sidebar=1&mode=design

[Antanasijevic]

@tomsmith8 Additional preview for table view

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=6112-16288&t=tFWVc2qDGBz03f0X-1&scaling=min-zoom&page-id=5900%3A37898&starting-point-node-id=5900%3A37899&show-proto-sidebar=1&mode=design

[tomsmith8]

Could you share the lottie file for the square animation

[Antanasijevic]

@tomsmith8 Here is selected Lottie animation for processing https://app.lottiefiles.com/share/14ee526e-ebfa-4fd2-9615-4710025c1512

Preview https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=6859-53803&t=ulIjMrjPM1lq2wsV-1&scaling=min-zoom&page-id=5900%3A37898&starting-point-node-id=5900%3A37899&show-proto-sidebar=1&mode=design

[Antanasijevic]

@tomsmith8 Here is preview how processing content may look like. We can use box animation instead of 3d box, and show Link user pasted in previous step. This way it will be clear what content is being processed, and feels like nice conclusion of creation process. What do you think?

https://github.com/stakwork/sphinx-nav-fiber/assets/13258550/e3600b3b-b1af-472e-9081-5c6ea3710870

Here is a mockup of content creation flow (Not quite correct, i made it just to show visual connection between pasted link and processing layout)

https://github.com/stakwork/sphinx-nav-fiber/assets/13258550/8a30a58a-3936-4881-8cc5-12c06404bebf

[Antanasijevic]

@tomsmith8 Here are basic option of processing content, with animated menu button. This example is for youtube content, but i will add remaining content types as well. Please open the prototype link to see animation.

Processing animation 1 - With box icon in menu

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=6942-33219&t=P4nNHFp4NqMzGEll-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=6942%3A33219&show-proto-sidebar=1&mode=design

Processing animation 2 - With current menu icon animated

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=6942-32172&t=P4nNHFp4NqMzGEll-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=6942%3A32172&show-proto-sidebar=1&mode=design

Content - Simple version and full version

One more alternative for box animation

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=6958-22639&t=L0mwa3dMJdWdWaej-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=6958%3A22639&show-proto-sidebar=1&mode=design

Table View https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7018-29290&t=Rw9jTk5aOYkpUhxl-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=7018%3A29290&show-proto-sidebar=1&mode=design

[Antanasijevic]

@tomsmith8 Updated version

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7049-27420&t=n0k6pe6RJhdmuLvg-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=7049%3A27420&show-proto-sidebar=1&mode=design

[Antanasijevic]

@tomsmith8 Processing Indicator has two parts:

• Blue indicator in top right corner, with animation and number of processed items
• Number of processed items next to a "Source Table" icon in main menu

Figma Project https://www.figma.com/file/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7197%3A24763&mode=design&t=2qpmkOD1QlVMOlnz-1

Prototype https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7197-24763&t=oW3p67AaG234w7B2-1&scaling=min-zoom&page-id=1238%3A3033&starting-point-node-id=1795%3A36724&show-proto-sidebar=1&mode=design

Lottie animation download link https://app.lottiefiles.com/share/a83ba5d2-fda7-4b84-b95d-acc3be1e95be

Notes

[Antanasijevic]

@tomsmith8 Here are layout options for Processing content (Basic and detailed options)

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7219-25290&t=mLklI9EJeJ7sjMTg-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=7219%3A25290&show-proto-sidebar=1&mode=design

Content Variations

https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7219-26832&t=mLklI9EJeJ7sjMTg-1&scaling=min-zoom&page-id=6897%3A33129&starting-point-node-id=7219%3A26832&show-proto-sidebar=1&mode=design

[Antanasijevic]

@tomsmith8 View content table layout - Full and empty state

[tomsmith8]

This is perfect

[Antanasijevic]

@tomsmith8 Final Figma designs for "My Content" Table

Full https://www.figma.com/file/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7210%3A33107&mode=design&t=1263MZ7F9MngNG4p-1

Empty https://www.figma.com/file/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7217%3A33611&mode=design&t=1263MZ7F9MngNG4p-1

Lottie animation https://app.lottiefiles.com/share/dcca0c80-7a4f-4ec0-8e5f-fbb71a2693b4

[Antanasijevic]

@tomsmith8 Final assets and few notes for processing node

Processing Node

• Shows up after content is created
• Budget blinks green to indicate payment
• Green success notification shows up in top right corner (Below budget)
• Blue animated indicator shows up on the left side of budget
• Blue number shows up on "Source table" icon in main menu, indicating the number of processing content.

Figma Design https://www.figma.com/file/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7197%3A24763&mode=design&t=1263MZ7F9MngNG4p-1

Prototype https://www.figma.com/proto/YuEbi4x32Mm8ZQJdnrs4uc/Second-Brain-Final-Designs?type=design&node-id=7197-24763&t=jCzrTKLNimE4A3pK-1&scaling=min-zoom&page-id=1238%3A3033&starting-point-node-id=1795%3A36724&show-proto-sidebar=1&mode=design

Lottie animation https://app.lottiefiles.com/share/dcca0c80-7a4f-4ec0-8e5f-fbb71a2693b4