wasp-lang/wasp
1
1
Fork 0
mirror of https://github.com/wasp-lang/wasp.git synced 2024-09-11 15:26:19 +03:00
Code Issues Projects Releases Wiki Activity

[feature] img+caption component (#416)

Browse Source 
[Blog] #410 - added image with caption React component.
This commit is contained in:
Himanshu 2022-01-11 18:49:27 +05:30 committed by GitHub
parent fe915158d9
commit 7c1fc37459
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/blog/2021-12-02-waspello.md
View File

@ -11,6 +11,7 @@ import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import InBlogCta from './components/InBlogCta';
import WaspIntro from './_wasp-intro.md';
import ImgWithCaption from './components/ImgWithCaption'
![Enter Waspello](../static/img/waspello-screenshot.png)
@ -169,14 +170,7 @@ This is pretty much it from the stuff that works 😄 ! I kinda rushed a bit thr
The main problem of the current implementation of Waspello is the **lack of support for optimistic UI updates in Wasp**. What this means is that currently, when an entity-related change is made (e.g. a card is moved from one list to another), we have to wait until that change is fully executed on the server until it is visible in the UI, which causes a noticeable delay.
In many cases that is not an issue, but when UI elements are all visible at once and it is expected from them to be updated immediately, then it is noticeable. This is also one of the main reasons why we chose to work on Waspello - to have a benchmark/sandbox for this feature! Due to this issue, here's how things currently look like:
<p align="center">
<figure>
<img alt="Waspello - no optimistic UI update"
src={useBaseUrl('img/waspello-no-opt-UI-updates.gif')}
/>
<figcaption class="image-caption">Without an optimistic UI update, there is a delay</figcaption>
</figure>
</p>
<ImgWithCaption alt="Waspello - no optimistic UI update" source="img/waspello-no-opt-UI-updates.gif" caption="Without an optimistic UI update, there is a delay"/>
You can notice the delay between the moment the card is dropped on the "Done" list and the moment it becomes a part of that list. The reason is that at the moment of dropping the card on "Done" list, the API request with the change is sent to the server, and only when that change is fully processed on the server and saved to the database, the query `getListsAndCards` returns the correct info and consequently, UI is updated to the correct state.
That is why upon dropping on "Done", the card first goes back to the original list (because the change is not saved in db yet, so `useQuery(getListsAndCards)` still returns the "old" state), it waits a bit until the API request is processed successfully, and just then the change gets reflected in the UI.

17
web/blog/components/ImgWithCaption.js Normal file
View File

@ -0,0 +1,17 @@
import React from "react";
import useBaseUrl from "@docusaurus/useBaseUrl";
const ImgWithCaption = (props) => {
return (
<div>
<p align="center">
<figure>
<img alt={props.alt} src={useBaseUrl(props.source)} />
<figcaption class="image-caption">{props.caption}</figcaption>
</figure>
</p>
</div>
);
};
export default ImgWithCaption;